通知公告循环向上滚动代码
html代码如下
<div class="scroll-wrap" style="height: 16px; overflow: hidden;"> <ul class="scroll-con fn-left" style="margin-top: 0px;"> <li style="height: 16px; line-height: 16px; overflow: hidden;"> <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家1</a> </li> <li style="height: 16px; line-height: 16px; overflow: hidden;"> <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家2</a> </li> <li style="height: 16px; line-height: 16px; overflow: hidden;"> <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家3</a> </li> <li style="height: 16px; line-height: 16px; overflow: hidden;"> <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家4</a> </li> </ul> </div>
js代码如下：
引入jquery文件cdn
<script src="http://code.jquery.com/jquery-2.2.3.js"></script>
<script>
/*公告滚动*/
$(function(){
var len = $(".scroll-con li").length;
console.log(len);
if(len > 1){
textRoll=function(){
$(".scroll-wrap").find(".scroll-con").animate({
marginTop : "-16px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
});
};
var roll= setInterval('textRoll()',1000);
$(".scroll-con li").mouseenter(function() {
clearInterval(roll);
}).mouseout(function(){
clearInterval(roll);
roll= setInterval('textRoll()',1000);
});
}
})
</script>
