jQuery元素滚动插件simplyScroll

 查看演示  website  立即下载

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

使用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实现卷动使用非常简单，其它应用大家可以查看在线演示，值得推荐。

PREVIOUS:
NEXT:
纯CSS3实现打火机火焰动画
路径菜单path-menu