简易向左移动的滚动效果 jquery simple marquee
<!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> 相关推荐
chensen 2020-11-14
lwnylslwnyls 2020-11-06
ATenhong 2020-10-15
yanzhelee 2020-10-13
佛系程序员J 2020-10-10
guojin0 2020-10-08
佛系程序员J 2020-10-08
bluewelkin 2020-09-16
wwzaqw 2020-09-04
zhongdaowendao 2020-09-02
favouriter 2020-08-18
奎因amp华洛 2020-08-15
一青年 2020-08-13
千锋 2020-08-10
nangongyanya 2020-08-09
dongxurr 2020-08-08
明天你好 2020-08-03
kyelu 2020-08-03
Ashes 2020-08-03