Home >Web Front-end >JS Tutorial >jquery plug-in jquery.nicescroll implements image drag and drop displacement

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

php中世界最好的语言Original: 2018-04-25 11:41:481491browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the use of jQuery plug-in seat-charts (with code)Next article：Detailed explanation of the use of jQuery plug-in seat-charts (with code)

See more

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

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

Related articles