html代码:
div class="la_3"> <ul> <li><a href="http://www.c114.net/news/2022/a945248.html">定制化移动互联服务——大唐发布5G智能网络平台</a></li> <li><a href="http://www.c114.net/news/2022/a944855.html">大唐移动无线网络为CBA总决赛打造数字盛宴</a></li> <li><a href="http://www.c114.net/news/2022/a943798.html">大唐移动2016服务合作伙伴大会在京召开 打造共赢大服务格局</a></li> <li><a href="http://www.c114.net/news/2022/a937230.html">2015年ICT龙虎榜揭晓:大唐移动荣获“无线网络技术创新奖”</a></li> </ul> </div>
js代码:
function anime(){ $(function () { var settime; $(".la_3").hover(function () { clearInterval(settime); }, function () { settime = setInterval(function () { var $first = $(".la_3 ul:first"); //选取div下的第一个ul 而不是li; var height = $first.find("li:first").height(); //获取第一个li的高度,为ul向上移动做准备; $first.animate({ "marginTop": -height + "px" }, 600, function () { $first.css({ marginTop:0 }).find("li:first").appendTo($first); //设置上边距为零,为了下一次移动做准备 }); }, 2000); }).trigger("mouseleave"); //trigger()方法的作用是触发被选元素的制定事件类型 }); }