jquery-Plug-in jquery.nicescroll-Methode, um das Ziehen von Bildern nach links und rechts ohne Bildlaufleiste zu realisieren

jquery-Plug-in jquery.nicescroll-Methode, um das Ziehen von Bildern nach links und rechts ohne Bildlaufleiste zu realisieren_jquery

WBOY

Freigeben： 2016-05-16 15:46:09

Original

1380 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode des JQuery-Plug-Ins jquery.nicescroll, um das Ziehen von Bildern nach links und rechts ohne Bildlaufleisten zu realisieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier stellen wir den Spezialeffekt des Ziehens von linken und rechten Bildern mit jQuery ohne Bildlaufleisten vor. Der Effekt entsteht durch die Kombination mehrerer Bilder. Beim Ziehen werden keine Bildlaufleisten angezeigt Prozess, der schöner ist. Wenn Sie diesen Effekt benötigen, sehen Sie sich bitte den Code im Feld unten an.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery.nicescroll无滚动条左右拖拽</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:none;}
#boxscroll {height: 313px;width: 900px;margin:0 auto;overflow: auto;}
#boxscroll div {width:12570px;}
#boxscroll div img {float:left;}
.row {background:#FFFFCC;}
.row2 {background:#66CCFF;}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script src="http://xiazai.jb51.net/201508/yuanma/jquery.nicescroll.js"></script>
<script>
 $(document).ready(function() {
  var nicesx = $("#boxscroll").niceScroll("#boxscroll div",{touchbehavior:true,cursorcolor:"#FF00FF",cursoropacitymax:0.6,cursorwidth:24,usetransition:true,hwacceleration:true,autohidemode:"hidden"});
 });
</script>
</head>
<body>
<div id="boxscroll">
 <div>
 <img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 </div>
</div>
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.