你的位置:快乐忆站 \ 分享 \ 文章正文

jQuery自动滚动插件

咱的jQuery处女插:自动滚动插件诞生于周四,完善于周五,发布于周日,哈哈,其实也没有完善,只是代码上稍微整理了一下,在参数处理和容错性方面还有很多的不足,希望高手看了之后能够直言提出来,因为我也想进步~本来周六就可以发出来的,但是周末搬家了,还跟原来的房东吵翻天了,BT房东,不想说这事了,只能说:没文化,真可怕!

貌似偏了,赶紧回来了~插件的作用先说说:其实我之前也写过一篇文章:《分享公告栏轮换代码》,此插件的前身就是这个jQuery效果,然后我进行了一些封装,整合了水平翻滚和竖直翻滚两种方式(通过参数设置翻滚方式),方便了日后的利用,顺便分享出来看大家是否有需要,需要的话大可以拿去~还没看明白这插件的用处?那么请看Demo

具体用法是这样的:

1.你要翻滚的内容必须具有如下HTML格式:

<--!id可换成class,但是建议用id-->
<div id="demo">
 <--!可以有多个ul,但是只有第一个ul会自动滚动--> 
 <ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
 </ul>
</div>

2.id为demo的div必须具有如下CSS属性,否则没有效果:

/*水平翻滚css*/
#demo1 {
 width:90px;
 height:30px;
 line-height:30px;
 overflow:hidden;
}
#demo1 ul {
 width:120px;
 height:30px;
}
#demo1 li {
 float:left;
 width:30px;
 height:30px;
 line-height:30px;
}
/*竖直翻滚css*/
#demo2 {
 height:30px;
 line-height:30px;
 overflow:hidden;
}
#demo2 ul {
 height:30px;
}
#demo2 li {
 height:30px;
 line-height:30px;
}

3.最后是引入jQuery和本插件并执行滚动函数:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-autoscroll.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#demo1").autoScroll({type:"H"});
  $("#demo2").autoScroll({timer:3000});
 })
</script>

至此,基本上完成了代码部分,最后就是参数的设置了。插件目前需要设置两个参数:type和timer。

type的意思是类型,就是滚动类型,"H"(带引号)表示水平滚动;"V"(带引号)表示竖直翻滚。注意,都是大写的字母,小写的写进去也可以,只是没有效果罢了~~默认为"V"即默认竖直翻滚,就如我首页的推荐文章一样。"H"的效果就如此页面的水平翻滚的”肖像“一样。

timer的意思是定时器,就是滚动的时间间隔,设置为数字,以毫秒为单位,默认为5000。

具体怎么设置参数的例子可参见上面代码部分。也可使用firebug查看Demo附件中含有插件文件,jquery文件和演示文件,感兴趣的自行下载看看吧。

新环境,网速貌似是华数宽带,看网页和上传文件一点都不给力,真想去办电信的宽带,可惜袋里空空如也~~哎~~!

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 45#
    一路上
    一路上 Firefox 17.0 Windows 7 2012-12-27 21:45 回复
    收藏一下,以后弄东西的时候用得着!
    小松
    小松 Google Chrome 23.0.1271.101 Mac OS X 10.8.2 2012-12-28 09:49 回复
    @一路上:感谢~
  2. 44#
    SEO
    SEO 2011-04-10 16:03 回复
    博主你的博客很有意思,标签、友情、日记都放在留言下面。感觉很大方
  3. 43#
    小爱
    小爱 2011-04-07 19:54 回复
    等EMLOG4.0等得我花儿都谢了~
    小松
    小松 2011-04-07 22:44 回复
    @小爱:呵呵,还在测试~
  4. 42#
    Joven
    Joven 2011-04-04 20:44 回复
    代码白痴表示看不懂,不过效果不错
    小松
    小松 2011-04-04 21:34 回复
    @Joven:哈哈
  5. 41#
    wmtimes
    wmtimes 2011-04-04 13:19 回复
    嗯。不错。很牛啊。呵呵。能不能做个不间断滚动的。或是像发微博那种第一条渐显的。
    小松
    小松 2011-04-04 20:02 回复
    @wmtimes:这个应该可以,只需要改一下代码就行吧
  6. 40#
    海风依旧
    海风依旧 2011-04-03 23:56 回复
    这的不错啊,正在学习中~看来要常来逛逛
    小松
    小松 2011-04-04 10:52 回复
    @海风依旧:欢迎常来看看~
  7. 39#
    Znotz
    Znotz 2011-04-03 17:51 回复
    人才啊..牛X
    小松
    小松 2011-04-03 19:33 回复
    @Znotz:这个不难的哦~
  8. 38#
    C瓜哥
    C瓜哥 2011-04-03 13:14 回复
    一周没更新了,最近很忙吗?
    小松
    小松 2011-04-03 13:37 回复
    @C瓜哥:不忙,在坐等emlog4.0发布~
  9. 37#
    N
    N 2011-04-02 15:58 回复
    偶貌似也写过相似的代码,不过偶木有把他做成插件~~
    小松
    小松 2011-04-02 16:00 回复
    @N:恩,是滴,这都被你知道了,太犀利了~~
  10. 36#
    CXM
    CXM 2011-04-02 13:20 回复
    好不容易终于找到附件下载的地方了~囧~
    小松
    小松 2011-04-02 14:09 回复
    @CXM:有那么难吗,看来我要改一下了
1 2 3 4 5

随机日志:

推荐日志:

彩色标签:

sitemap