Le plug-in jquery jquery.nicescroll implémente le déplacement par glisser-déposer de l'image-js tutoriel-php.cn

Le plug-in jquery jquery.nicescroll implémente le déplacement par glisser-déposer de l'image

php中世界最好的语言

Libérer： 2018-04-25 11:41:48

original

1495 Les gens l'ont consulté

Cette fois, je vous présente le plug-in jquery jquery.nicescroll pour implémenter le glisser et le déplacement d'image, et le plug-in jquery jquery.nicescroll pour implémenter le glisser et le déplacement d'image. Quelles sont les précautions . Voici les cas pratiques. Jetons un coup d'oeil une fois.

Nous introduisons ici l'effet de glissement d'image jQuery vers la gauche et la droite, pas de barre de défilement, l'effet de combinaison de plusieurs images ensemble. Le plug-in utilise jquery.nicescroll.js, et aucune barre de défilement n'apparaîtra pendant le glissement. processus. C'est plus beau. Si vous avez besoin de cet effet, vous pouvez voir le code dans la case ci-dessous.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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 p {width:12570px;}
#boxscroll p 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 p",{touchbehavior:true,cursorcolor:"#FF00FF",cursoropacitymax:0.6,cursorwidth:24,usetransition:true,hwacceleration:true,autohidemode:"hidden"});
 });
</script>
</head>
<body>
<p id="boxscroll">
 <p>
 <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" />
 </p>
</p>
</p>
</body>
</html>

Copier après la connexion

Je te crois J'ai maîtrisé la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :