快捷導(dǎo)航

jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法

更新時(shí)間：2015年08月10日 12:38:53 作者：企鵝

這篇文章主要介紹了jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法,實(shí)例分析了jquery.nicescroll插件實(shí)現(xiàn)圖片拖拽效果的方法,需要的朋友可以參考下

本文實(shí)例講述了jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法。分享給大家供大家參考。具體如下：

這里介紹jQuery圖片左右拖拽特效，無(wú)滾動(dòng)條，將多張圖片組合在一起形成的效果，插件使用的是jquery.nicescroll.js，拖動(dòng)過(guò)程中不會(huì)出現(xiàn)滾動(dòng)條，這樣更美觀了一些，若需要此效果，可參見(jiàn)下邊框中的代碼。

運(yùn)行效果截圖如下：

具體代碼如下：

<!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無(wú)滾動(dòng)條左右拖拽</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://img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="http://img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 </div>
</div>
</div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: