Heim > Artikel > Web-Frontend > jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery
- WBOYOriginal
- 2016-05-16 15:46:091295Durchsuche
本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法。分享给大家供大家参考。具体如下：
这里介绍jQuery图片左右拖拽特效，无滚动条，将多张图片组合在一起形成的效果，插件使用的是jquery.nicescroll.js，拖动过程中不会出现滚动条，这样更美观了一些，若需要此效果，可参见下边框中的代码。
运行效果截图如下：
具体代码如下：
<!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" style="max-width:90%" style="max-width:90%" onmousedown="return false" / alt="jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery" >
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" style="max-width:90%" style="max-width:90%" onmousedown="return false" / alt="jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery" >
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" style="max-width:90%" style="max-width:90%" onmousedown="return false" / alt="jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery" >
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" style="max-width:90%" style="max-width:90%" onmousedown="return false" / alt="jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery" >
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" style="max-width:90%" style="max-width:90%" onmousedown="return false" / alt="jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery" >
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" style="max-width:90%" style="max-width:90%" onmousedown="return false" / alt="jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法_jquery" >
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
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仿百度百科底部浮动导航特效_jqueryNächster Artikel：jquery实现表单输入时提示文字滑动向上效果_jquery