jQuery元素滚动插件simplyScroll

所属分类:UI-滚动

 40287  256  查看评论 (5)
分享到微信朋友圈
X
jQuery元素滚动插件simplyScroll ie兼容6

支持水平和垂直滚动向前和向后 

使用DOM scrollTop的/ ScrollLeft以获得最佳性能 

支持环状滚动(无限的效果) 

通过CSS和HTML的可完全自定义 

支持的jQuery1.2.6及更高版本(测试可达1.7.1) 

适用于所有主要的浏览器(包括IE6/7!)


===========以下内容由 江南./ty. 提供===============

需要使用jQuery库文件和simplyScroll库文件

需要自定义显示元素(如,图片)的CSS样式

使用实例

一,包含文件部分

<script type="text/javascript" src="/jquery.js">
</script><script type="text/javascript" src="jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll.css" media="all" type="text/css">

二,HTML部分

<ul id="scroller">
  <li><img src="image1.jpg" width="290" height="200"></li>
  <li><img src="image2.jpg" width="290" height="200"></li>
  <li><img src="image3.jpg" width="290" height="200"></li>
</ul>

三,javascript部分

<script type="text/javascript">
  (function($) {
     $(function() {
       $("#scroller").simplyScroll({
         autoMode: 'loop',
       });
     });
   })(jQuery);
</script>

上面实例可知,使用jQuery插件simplyScroll非常简单,定义需要显示的元素(如实例中的图片)就可实现卷动效果。

simplyScroll参数清单(具体大家可查看jQuery插件simplyScroll的JS库文件)

className    'smooth-scroll'    CSS类名

frameRate    24    每秒移动或frame的数量

speed    1            每frame移动的像素

horizontal    true    移动的方向,水平或垂直

autoMode 'off'    是否启动自动模式   loop或bounce

pauseOnHover    true    当鼠标悬停时是否暂停

flickrFeed    ''    调用JSON使用flickr feed路径

jsonSource    ''    调用本地JSON

jsonImgWidth    240    Flickr/JSON 的图片宽度

jsonImgHeight    180    Flickr/JSON 的图片高度

其中几个参数只针对JSON数据源,这对于实现动态图片又图片非常多的展示来说非常实用,jQuery插件simplyScroll实现卷动使用非常简单,其它应用大家可以查看在线演示,值得推荐。

相关插件-滚动

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 45482  420

javript自定义滚动条

用原生的javript写的自定义滚动条具有拖拽,滚轮事件和键盘事件
  滚动
 25678  285

jQuery简单的文字跑马灯特效

这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
  滚动
 194314  283

jQuery全屏视差滚动效果

jQuery全屏视差滚动效果
  滚动
 34792  345

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    踏雪、无痕 0
    2018/9/5 15:57:02
    只一条数据,为什么会显示2条数据出来?? 回复
    励海科技-李娜 0
    2017/12/5 16:55:14

    用marquee标签是不是可以实现相同的效果

    回复
    ё呻谨孑? 0
    2016/7/26 10:07:57
    一个效果怎么使用多次? 回复
    W00 0
    2016/6/16 16:06:29
    不支持火狐,? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复