此处记录一下,方便以后用
1.html样式自己布局就可以了
<div class="myscroll">
<ul>
<li><div class="dixian"><span>张坤</span> 已获得 六角形大蹦床运营方案...</div></li>
<li><div class="dixian"><span>刘强</span> 已获得 儿童大蹦床运营方案...</div></li>
<li><div class="dixian"><span>李东</span> 已获得 室外充气大蹦床运营方案...</div></li>
<li><div class="dixian"><span>向阳</span> 已获得 水上娱乐大蹦床运营方案...</div></li>
<li><div class="dixian"><span>赵喜</span> 已获得 六角形大蹦床运营方案...</div></li>
<li><div class="dixian"><span>张帅</span> 已获得 六角形大蹦床运营方案...</div></li>
<li><div class="dixian"><span>刘力</span> 已获得 六角形大蹦床运营方案...</div></li>
<li><div class="dixian"><span>孙斌彦</span> 已获得 世界室内大蹦床运营方案...</div></li>
<li><div class="dixian"><span>王凌</span> 已获得 室外充气大蹦床运营方案...</div></li>
<li><div class="dixian"><span>马山</span> 已获得 儿童大蹦床运营方案...</div></li>
</ul>
</div>
css样式
.myscroll {
background-color: white;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
line-height: 30px;
font-size: 12px;
overflow: hidden;
}
js文件
(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);
html也可以操控速度
<script>
$(function(){
$('.myscroll').myScroll({
speed: 30, //数值越大,速度越慢
//rowHeight: 26 //li的高度
});
});
</script>
以后遇到向上无缝轮播,可以直接拿来用