正文
jQuery无缝滚动向上
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
<style>
*{
margin: 0;
padding: 0;
}
.div{
width: 200px;
height: 240px;
overflow: hidden;
position: relative;
border: 1px solid #d74147;
}
.div ul{
width: 200px;
height: 240px;
position: absolute;
margin: 0;
padding: 0; }
.div ul li{
width: 200px;
height: 60px;
list-style-type: none;
}
</style>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(function(){ //复制与现有的Li一样多个
$('ul').find('li').clone().appendTo($('ul'));
$('ul').height($('ul').find('li').length * $('ul').find('li').height());
setInterval(function() {
if($('ul').position().top < -$('ul').height()/2){
$('ul').css('top','0');
}
else{
$('ul').css('top',$('ul').position().top - 2 + 'px');
} },30);
}); </script>
</head>
<body>
<div class="div" id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/1.jpg" /></li> </ul>
</div>
</body>
</html>
