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 相关文章推荐
js继承的实现代码
Aug 05 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue实现配置全局访问路径头(axios)
Nov 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
python查看微信好友是否删除自己
2016/12/19 Python
python reduce 函数使用详解
2017/12/05 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
python实现图片彩色转化为素描
2019/01/15 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python List cmp()知识点总结
2019/02/18 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
教师档案管理制度
2014/01/23 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
十佳护士先进事迹
2014/05/08 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server