18-jquery无缝滚动案例 18-jquery无缝滚动案例

jquery无缝滚动案例 【18-jquery无缝滚动案例】html

最新动态甜美宽松毛衣今秋一定红. 秋装百搭小马甲不到50元. 修身韩版小西装万人疯抢. 夏末雪纺店主含泪大甩卖. 瑞丽都疯狂推荐的秋装. 48元长款针织小开衫卖疯啦. 长袖雪纺衫单穿内搭都超美.

分析

1，ul整体向上慢慢的走一个li的高度（margin-top为负值）
2，ul的第一个li放到最后面
3，ul整体突然快速margin-top：0；

$(function(){ var timeid; var h=$(".scrollNews ul li:eq(0)").outerHeight(); //获取li元素的高function move(){ //1 ul整体向上慢慢的走一个li的高度（margin-top为负值 //最后一个function 是指动画执行完毕后要做的函数 $(".scrollNews ul").animate( {"margin-top":-h}, 500, function(){ //2,ul的第一个li放到最后面 var fi=$(".scrollNews ul li:eq(0)"); $(".scrollNews ul").append(fi); //3,ul整体突然快速margin-top：0； $(".scrollNews ul").css("margin-top",0); timeid=setTimeout(function(){ move()},1500) }//回调函数 ); //animate ed }//move ed// 鼠标放上ul停止动画鼠标离开开始动画 $(".scrollNews").hover(function(){ clearTimeout(timeid); },function(){ move(); }).trigger("mouseleave") //默认自动触下鼠标离开 })

css

*{ padding:0; padding:0; } body{ padding:50px; } ul,ol{ list-style:none; } h3,div,ul,li,ol{ margin:0; padding:0; } .global_module h3{ height:35px; line-height:35px; text-align:center; background-color:#369; color:#f6f6f6; } .news ul li{ height:30px; line-height:30px; padding-left:15px; color:#666; border- bottom:1px dashed #d0d0d0; } .scrollNews{ height:150px; overflow:hidden; border: 1px solid red; } .news{ width:220px; border:1px solid #36C; }