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


Posted in Javascript onAugust 10, 2015

本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法。分享给大家供大家参考。具体如下:

这里介绍jQuery图片左右拖拽特效,无滚动条,将多张图片组合在一起形成的效果,插件使用的是jquery.nicescroll.js,拖动过程中不会出现滚动条,这样更美观了一些,若需要此效果,可参见下边框中的代码。

运行效果截图如下:

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

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
基于JS判断对象是否是数组
Jan 10 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
You might like
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python实现用户登录系统
2016/05/21 Python
Python中实现switch功能实例解析
2018/01/11 Python
python中返回矩阵的行列方法
2018/04/04 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
python全栈开发语法总结
2020/11/22 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
高二英语教学反思
2014/01/19 职场文书
中国好声音华少广告词
2014/03/17 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Html5生成验证码的示例代码
2021/05/10 Javascript
如何判断pytorch是否支持GPU加速
2021/06/01 Python