Jquery下滑插件
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>
<完>