编程 Javascript

jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

Posted in Javascript onAugust 10, 2015

本文实例讲述了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.3water.com/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="//img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="//img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="//img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="//img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="//img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 <img src="//img.jbzj.com/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
 </div>
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery的.live()和.die() 使用介绍

Sep 10 Javascript

Jquery Ajax解析XML数据(同步及异步调用)简单实例

Feb 12 Javascript

js实现div弹出层的方法

Nov 20 Javascript

Jquery实现由下向上展开效果的例子

Dec 08 Javascript

了不起的node.js读书笔记之node.js中的特性

Dec 22 Javascript

Javascript定义类（class）的三种方法详解

Mar 13 Javascript

JS实现自动变换的菜单效果代码

Sep 09 Javascript

基于javascript实现的购物商城商品倒计时实例

Dec 11 Javascript

Django1.7+JQuery+Ajax验证用户注册集成小例子

Apr 08 jQuery

深入理解ES6之数据解构的用法

Jan 13 Javascript

原生JS实现的双色球功能示例

Feb 02 Javascript

仿vue-cli搭建属于自己的脚手架的方法步骤

Apr 17 Javascript

jquery实现表单输入时提示文字滑动向上效果

Aug 10 #Javascript

javascript与Python快速排序实例对比

Aug 10 #Javascript

javascript密码强度校验代码（两种方法）

Aug 10 #Javascript

javascript实现数组内值索引随机化及创建随机数组的方法

Aug 10 #Javascript

jQuery解决input超多的表单提交

Aug 10 #Javascript

jQuery实现的图文高亮滚动切换特效实例

Aug 10 #Javascript

jQuery基于ajax实现带动画效果无刷新柱状图投票代码

Aug 10 #Javascript