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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
Vue中computed及watch区别实例解析
Aug 01 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 实现的将图片转换为TXT
2015/10/21 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python导入时小括号大作用
2017/01/10 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python 遍历pd.Series的index和value
2019/11/26 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
Python try except finally资源回收的实现
2021/01/25 Python
好的自荐信包括什么内容
2013/11/07 职场文书
学校门卫管理制度
2014/01/30 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
对祖国的寄语大全
2014/04/11 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
会计试用期自我评价
2014/09/19 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python