jquery plug-in jquery.nicescroll implements image drag and drop displacement-JS Tutorial-php.cn

jquery plug-in jquery.nicescroll implements image drag and drop displacement

php中世界最好的语言

Release： 2018-04-25 11:41:48

Original

1419 people have browsed it

This time I bring you the jquery plug-in jquery.nicescroll to implement image dragging and displacement, and the jquery plug-in jquery.nicescroll to implement image dragging and displacement. What are the precautions?. Here are the practical cases. Let’s take a look. one time.

Here we introduce the special effect of dragging left and right pictures with jQuery without scroll bars. The effect is formed by combining multiple pictures together. The plug-in uses jquery.nicescroll.js. No scroll bars will appear during the dragging process. This is more beautiful. If you need this effect, you can see the code in the box below.

The screenshot of the running effect is as follows:

The specific code is as follows:

<!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>

Copy after login

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

jQuery implements a collection of special effects for text buttons in forms

detailed explanation of the steps for jQuery to implement a table with checkboxes

The above is the detailed content of jquery plug-in jquery.nicescroll implements image drag and drop displacement. For more information, please follow other related articles on the PHP Chinese website!