首页 > 代码库 > jquery实现内容滚动
jquery实现内容滚动
HTML代码:
<div class="scollNews"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul> </div>
jquery代码:
$(function(){ var settime; $(".scollNews").hover(function(){ clearInterval(settime); },function(){ settime=setInterval(function(){ var $first=$(".scollNews ul:first"); //获取类名下的第一个ul var height=$first.find("li:first").height(); //获取第一个li的高 $first.animate({"marginTop":-height+"px"},100,function(){ $first.css({marginTop:0}).find("li:first").appendTo($first); //设置上边距为零,为了下一次移动做准备 }); },1000); }).trigger("mouseleave"); //自动触发元素的制定事件类型})
注:只要修改动画时间就可以控制滚动的速度。
jquery实现内容滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。