简易向左移动的滚动效果 jquery simple marquee
程序员文章站
2022-07-07 15:40:22
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易marquee效果</title>
<style type="text/css">
#marquee2{
width:400px;
/**超出元素部分隐藏*/
overflow:hidden;
background:#EFEFEF;
/**定位放在中间主要是为不放到屏幕边缘*/
position: absolute;
left:200px;
top:150px;
}
#marquee2 ul{
list-style: none;
position: relative;
left: auto;
top:auto;
}
#marquee2 ul li{
float:left;
padding:0 10px;
line-height:25px;
}
</style>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function () {
var marqueeWith = $('#marquee2').width();
var left = $('#marquee2 ul').width();
console.log(left);
var animateTime = 5000;
//移动到#marquee2宽度结尾的时间
var resetTimeout = 10;
//让ul元素在animateTime内向移动marqueeWith像素
$('#marquee2 ul').animate({'left': '-'+(marqueeWith)+'px'},animateTime);
setInterval(function(){
console.log('a')
//使ul元素在10毫秒内移到父元素div的宽度外
$('#marquee2 ul').animate({'left': marqueeWith +'px'},resetTimeout);
setTimeout(function(){
$('#marquee2 ul').animate({'left': '-'+(marqueeWith)+'px'},animateTime);
},resetTimeout);
},(animateTime+resetTimeout));
})
</script>
</head>
<body>
<div id="marquee2" >
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li><img src="http://ku.shouce.ren/libs/kxbdMarquee/img/02s.jpg" /></li>
</ul>
</div>
</body>
</html>