你的位置:快乐忆站 \ 前端 \ 文章正文

分享公告栏轮换代码

自从自己搭了个微博后就在捣鼓着这个公告栏的轮换效果了,之前一直比较中意阿邙的那个轮换效果,无奈我对他的js代码有点生疏,不能很好的移植,然后就像凭借着自己对jQuery的仅有的一点知识自己折腾一些代码出来,最终宣告失败!o(╯□╰)o不过天无绝人之路,无意间逛网站发现了一串很有用的代码,刚好是我需要的轮换效果,毫不客气得拿来用了~下面分享下我的公告栏代码。

公告栏基本结构

<div class="location">//自行修改
<ul>
<li>内容1</li>
<li>内容2</li>
<li>...</li>
</ul>
</div>

基本并必须的css代码

.location{height:25px;line-height:25px;overflow:hidden}//25请自行修改为合适数值
.location ul li{overflow:hidden;height:25px}

核心的js轮换代码

function AutoScroll(obj){
    $(obj).find("ul:first").animate({
    marginTop:"-25px"//和上面的height一致
    },800,function(){
        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
    });
}
$(function(){
    $t=setInterval('AutoScroll(".location")',5000)//轮换间隔,单位毫秒,下同
    $(".location").hover(function(){clearInterval($t);},function(){$t=setInterval('AutoScroll(".location")',5000);});
})

解释下代码的用处:AutoScrol(obj)为轮换核心代码,下面的jQuery每隔5秒执行一次轮换代码,即翻滚一条公告,鼠标放在这个div上时停止轮换,鼠标移开后继续执行轮换代码,是不是蛮实用的呢?

至此,基本上公告栏的轮换效果已经大功告成了,演示就见我的公告栏就ok了,在日志上方就有~最后就剩下内容和一些后续美化的css代码等着你来写了~更新完毕,静静地等待沙发...

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 184#
    alen
    alen Maxthon 4.0.3.1000 Windows XP 2013-01-27 02:08 回复
    不打算告诉你,这很给力。
    小松
    小松 Mobile Google Chrome  iPhone iOS 6.0.2 2013-01-27 10:25 回复
    @alen:吼吼,你好坑爹……
    alen
    alen Maxthon 4.0.3.1000 Windows XP 2013-01-27 10:31 回复
    @小松:嘿嘿
    小松
    小松 Google Chrome 24.0.1312.56 Mac OS X 10.8.2 2013-01-27 16:47 回复
    @alen:你肿么来挖我以前的文章了?
  2. 183#
    夏天
    夏天 Firefox 17.0 Windows XP 2012-12-02 10:21 回复
    我表示对代码鸭梨山大呀。
    小松
    小松 Google Chrome 23.0.1271.95 Mac OS X 10.8.2 2012-12-02 20:46 回复
    @夏天:哈哈,慢慢来,做站长,代码始终要会的
  3. 182#
    低版本
    低版本 2011-02-28 21:24 回复
    代码不错,实用。。改日去折腾折腾
    小松
    小松 2011-02-28 21:38 回复
    @低版本:这个用处很大的呢~
  4. 181#
    阿达
    阿达 2011-02-28 12:26 回复
    js代码直接存为    XXXX.js  ,然后在header.php调用就行么?~~~
    小松
    小松 2011-02-28 14:37 回复
    @阿达:可以的
  5. 180#
    电脑人生
    电脑人生 2010-11-24 12:14 回复
    不错!!!!!
  6. 179#
    kaka
    kaka 2010-09-27 23:31 回复
    回复90楼小松:很有爱啊~~
  7. 178#
    小松
    小松 2010-09-27 13:07 回复
    @kaka:自己弄的~
  8. 177#
    kaka
    kaka 2010-09-27 12:05 回复
    这个我喜欢 ~~顺便问句  一级二级热门的是插件么??还是自己弄的 ?
  9. 176#
    电脑人生
    电脑人生 2010-09-19 14:00 回复
    呵呵 这东西好 Z用不上哦
  10. 175#
    小松
    小松 2010-09-04 14:34 回复
    @deardongdong:是林西老九,呵呵,他买了广告位就放他的喽~
1 2 3 4 5 6 ... »

随机日志:

推荐日志:

彩色标签:

sitemap