Jquery上滑插件
今天，闲着没事，就试着用JQuery写了这个网上很常见的上滑效果。
具体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #div1{ width:800px;height:80px; overflow:hidden; border:1px solid red;margin:0 auto;} #ul1{ width:600px;margin:0;padding:0;} #ul1 li{border:1px solid black; list-style-type:none;} </style> <script type="text/javascript" src="http://xx.house.shangdu.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> function UpSlider() { var speed = 1000; //控制滑动的速度，数值越大滑动越慢 var thisUl = $("#ul1");//获取ul var nowLi = thisUl.find("li:first");//获取当前li var lineHeight = nowLi.outerHeight(); //获取当前li的高度(包括border) var upHeight = (0 - lineHeight); //每次上滑的高度值 //对ul动画处理 $("#ul1").animate({marginTop:upHeight},speed,function(){nowLi.appendTo(thisUl);thisUl.css({marginTop:0});}); } //页面的DOM结构就绪后就执行 $(document).ready(function () { var Interval = 3000;//控制停顿的时间长短，值越大停顿越长 //每隔3000毫秒执行一次 var timer = setInterval("UpSlider()", Interval); //鼠标事件 $("#div1").hover(function () { clearInterval(timer); }, function () { timer = setInterval("UpSlider()", Interval); }); }); </script></head><body><div id="div1"> <ul id="ul1"> <li>我是1</li> <li>我是2</li> <li>我是3</li> <li>我是4</li> <li>我是5</li> <li>我是6</li> <li>我是7</li> </ul> </div></body></html><完>