脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery插件jquery.nicescroll实现图片无滚动条左右拖拽

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

 更新时间：2015年08月10日 12:38:53   作者：企鹅  
这篇文章主要介绍了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法,实例分析了jquery.nicescroll插件实现图片拖拽效果的方法,需要的朋友可以参考下

本文实例讲述了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.jb51.net/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与WebMethod投票功能实现代码

    基于Jquery与WebMethod投票功能实现代码

    基于Jquery与WebMethod投票功能实现代码，需要的朋友可以参考下。
    2011-01-01
  • 基于jQuery实现列表循环滚动小技巧(超简单)

    基于jQuery实现列表循环滚动小技巧(超简单)

    只要能够不停地把第一个item移动到末尾，其余的自会往上填补空缺，填补的过程用动画放慢些，就能有不断滚动的视觉效果了，这种效果基于jquery怎么实现呢？下面小编给大家带来了jQuery列表循环滚动效果的实现思路代码，一起看看吧
    2021-08-08
  • jquery实现心算练习代码

    jquery实现心算练习代码

    实现代码的过程中，有两个问题很棘手，一个是开始按钮连续单击，计时时间会迅速加快；二是如何判定玩家单击哪个按钮。
    2010-12-12
  • 基于jQuery实现的美观星级评论打分组件代码

    基于jQuery实现的美观星级评论打分组件代码

    这篇文章主要介绍了基于jQuery实现的美观星级评论打分组件代码,涉及jQuery回调函数及页面元素属性动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 轻松掌握jQuery中wrap()与unwrap()函数的用法

    轻松掌握jQuery中wrap()与unwrap()函数的用法

    wrap()能够将指定HTML元素包裹DOM结构,与之相反unwrap()函数则是将DOM去掉^^下面让我们来以两个小例子轻松掌握jQuery中wrap()与unwrap()函数的用法:)
    2016-05-05
  • jquery 输入框查找关键字并提亮颜色的实例代码

    jquery 输入框查找关键字并提亮颜色的实例代码

    下面小编就为大家分享一篇jquery 输入框查找关键字并提亮颜色的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • jQuery窗口拖动功能的实现代码

    jQuery窗口拖动功能的实现代码

    本文通过jquery代码实现窗口拖动功能以及jQuery 鼠标拖拽移动窗口的实现代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-02-02
  • jQuery控制iFrame(实例代码)

    jQuery控制iFrame(实例代码)

    这篇文章主要是对jQuery控制iFrame的实例代码进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JQuery 插件制作实践 xMarquee插件V1.0

    JQuery 插件制作实践 xMarquee插件V1.0

    今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单，LEVIN实际应用中也用到,所以稍作整理如下.
    2010-04-04
  • jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.
    2010-12-12

最新评论