suchen

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

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

WBOY
WBOYOriginal
2016-05-16 15:46:091374Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery imitiert den schwebenden Navigationseffekt am Ende von Baidu Encyclopedia_jqueryNächster Artikel：jquery imitiert den schwebenden Navigationseffekt am Ende von Baidu Encyclopedia_jquery

In Verbindung stehende Artikel

Mehr sehen