这款jQuery仿新浪微博首页滚动留言板插件代码非常简洁。
HTML结构
<div id="con"> <div class="bottomcover" style="z-index:2;"></div> <ul> <li> <div class="div_left"><a href="http://www.htmleaf.com/"><img src="images/head.jpg" title="Jarvis_风"></a></div> <div class="div_right"> <a href="http://www.htmleaf.com/" target="_blank">Jarvis_风</a>:... <div class="twit_item_time">3分钟前</div> </div> </li> ... </ul> </div>
调用插件
首先要引入jQuery和jquery.pause.min.js文件。
$(function () { var scrtime; var $ul = $("#con ul"); var liFirstHeight = $ul.find("li:first").height();//第一个li的高度 $ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将第一个li隐藏在列表上方 因li的上下padding:10px所以要-20 $("#con").hover(function () { $ul.pause();//暂停动画 clearInterval(scrtime); }, function () { $ul.resume();//恢复播放动画 scrtime = setInterval(function scrolllist() { //动画形式展现第一个li $ul.animate({ top: 0 + "px" }, 1500, function () { //动画完成时 $ul.find("li:last").prependTo($ul);//将ul的最后一个剪切li插入为ul的第一个li liFirstHeight = $ul.find("li:first").height();//刚插入的li的高度 $ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将刚插入的li隐藏在列表上方 因li的上下padding:10px所以要-20 }); }, 3300); }).trigger("mouseleave");//通过trigger("mouseleave")函数来触发hover事件的第2个函数 });