标签:inter app tin over font flow script cti javascrip
一般在页面上都会出现一条一条的通告,有些会使用向上滚动或者左右滚动的方式来展示,这样比较美观又不占位置;
现在就说一下这个向上的无缝滚动怎么做
1:html
<div class="two_fr_list"> <ul style="margin-top: -1px;"> <li>1111111111111111111111111</li> <li>222222222222222222222222</li> <li>3333333333333333333333</li> <li>44444444444444444444444444</li> <li>5555555555555555555555555555555</li> <li>6666666666666666666666666666666</li> <li>777777777777777777777777777</li> <li>88888888888888888888888888</li> <li>9999999999999999999999999999</li> <li>111111111111111111111111</li> <li>2222222222222222222222222222222</li> <li>33333333333333333333333</li> <li>4444444444444444444</li> <li>55555555555555555555555555</li> <li>66666666666666666666666666666666666</li> <li>7777777777777777777777777777777777</li> <li>8888888888888888888888888888888888</li> <li>999999999999999999999999999999999</li> </ul> </div>
2:css要设置一下展示这些内容的高度
.two_fr_list { margin: 20px 20px 0; line-height: 28px; font-size: 16px; height: 340px; overflow: hidden; }
3:引入jq库
4:js
// JavaScript Document 包装 (function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: ‘-=1‘ },0,function(){ var s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i){ var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery); $(document).ready(function () { $("div.two_fr_list").myScroll({ speed: 40, //数值越大,速度越慢 rowHeight: 28 //li的高度 }); })
标签:inter app tin over font flow script cti javascrip
原文地址:http://www.cnblogs.com/huahua0825/p/7760604.html