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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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 XML备份Mysql数据库
2009/05/27 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php格式化日期实例分析
2014/11/12 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
Python常用正则表达式符号浅析
2014/08/13 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
python 实现目录复制的三种小结
2019/12/04 Python
为什么说python更适合树莓派编程
2020/07/20 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
机修工工作职责
2014/02/21 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
关于爱国的标语
2014/06/24 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
关于公司年会的开幕词
2016/03/04 职场文书