公告滚动
setInterval() 按照指定的时间周期(以毫秒计)来调用函数或计算表达式
弊端:随着时间的推移内存占用会增多,时间长了可能会造成页面卡顿,严重的甚至浏览器崩溃
clearInterval() 取消由 setInterval() 函数设定的定时执行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://lzycweb.eap2.net/resource/css/bootstrap.min.css">
<script src="http://lzycweb.eap2.net/resource/js/jquery-2.1.4.min.js"></script>
</head>
<body>
<style>
boddy {
background: #f3f3f3;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.notice {
width: 600px;
background: #fff;
box-shadow: 0 0 25px rgba(180, 180, 180, .4);
margin: 50px auto;
height: 46px;
overflow: hidden;
}
.notice ul li {
width: 100%;
line-height: 46px;
color: #999;
padding: 0 15px;
/* float: left; */
}
</style>
<div class="notice">
<ul>
<li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
<li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
<li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
<li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
<li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
</ul>
</div>
<script>
var lineHeight = $('.notice ul li').css('line-height');
// 公用滚动方法
function scroll(lineHeight) {
$('.notice').find('ul').animate({
marginTop: '-' + lineHeight
}, 500, function () {
// 动画执行完的回调
$(this).css({
'margin-top': 0
}).find('li:first').appendTo(this)
})
}
$(function () {
var time = setInterval('scroll(lineHeight)', 3000)
$('.notice ul').find('li').mouseover(function () {
clearInterval(time)
}).mouseout(function () {
time = setInterval('scroll(lineHeight)', 3000)
})
})
</script>
</body>
</html>