建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

jQuery实现无限循环滚动公告

时间:2012-05-14 20:55来源: 作者: 点击:
今天把博客的公告栏做了一个小效果,如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。在此感谢Newton同学的耐心指导,不多说了,上代码!或者你可以直接前往DEMO看实例   jQuery代码   /第二版:Newton改造   (function (win){   var callboarT
今天把博客的公告栏做了一个小效果,如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。

  jQuery代码

  /第二版:Newton改造

  (function (win){

  var callboarTimer;

  var callboard = $('#callboard');

  var callboardUl = callboard.find('ul');

  var callboardLi = callboard.find('li');

  var liLen = callboard.find('li').length;

  var initHeight = callboardLi.first().outerHeight(true);

  win.autoAnimation = function (){

  if (liLen <= 1) return;

  var self = arguments.callee;

  var callboardLiFirst = callboard.find('li').first();

  callboardLiFirst.animate({

  marginTop:-initHeight

  }, 500, function (){

  clearTimeout(callboarTimer);

  callboardLiFirst.appendTo(callboardUl).css({marginTop:0});

  callboarTimer = setTimeout(self, 5000);

  });

  }

  callboard.mouseenter(

  function (){

  clearTimeout(callboarTimer);

  }).mouseleave(function (){

  callboarTimer = setTimeout(win.autoAnimation, 5000);

  });

  }(window));

  setTimeout(window.autoAnimation, 5000);

 

  HTML代码:

   <div id="callboard">
   <ul>
   <li>
         <a href="
http://www.sanfz.com">公告:前端组主题正在整理中..有需要用的朋友请留个言,以方便及时通知!</a>
     </li>
     <li>
         <span style="color:red;">公告:前端组上线一个月零八天,PR升为3,BD权重1</span>
     </li>

   </ul>

 

  CSS代码:(可根据需求另设)

  #callboard { height:24px; line-height:24px; overflow:hidden;}

  #callboard ul { padding:0;}

  #callboard li { padding:0;}

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片