<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"></script>
<style>
body {
background: #e9e9e9;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 800px;
margin: 100px auto;
}
.notic {
width: 100%;
height: 45px;
background: #fff;
overflow: hidden;
box-shadow: 0 0 25px rgba(180, 180, 180, 0.5);
}
.notic ul li {
height: 45px;
line-height: 45px;
font-size: 14px;
padding: 0 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="notic">
<ul>
<li><span class="pull-right">08-08</span>庆祝新中国成立70周年大型成就展24日起向公众开放</li>
<li><span class="pull-right">08-08</span>93岁没想过退休美国华盛顿交</li>
<li><span class="pull-right">08-08</span>企业国成立70周年大型成就展24日起向</li>
<li><span class="pull-right">08-08</span>发色和凌晨3点起来发推</li>
<li><span class="pull-right">08-08</span>他为村民解决</li>
<li><span class="pull-right">08-08</span>庆祝新中国成立70周年大型成就展24日起向公众开放</li>
<li><span class="pull-right">08-08</span>激进示威者抗议气候变化交通美国交通一时瘫痪</li>
</ul>
</div>
</div>
<script>
// setInterval() 按照指定的时间周期（以毫秒计）来调用函数或计算表达式
// 弊端：随着时间的推移内存占用会增多，时间长了可能会造成页面卡顿，严重的甚至浏览器奔溃
// clearInterval() 取消由 setInterval() 函数设定的定时执行操作
// setInterval()定时器开始 方法可按照指定的周期（ 以毫秒计） 来调用函数或计算表达式。
// setInterval() 方法会不停地调用函数， 直到 clearInterval() 被调用或窗口被关闭。
//这一步就是 给选取的ul 先让他向上走一个li的高度然后再让他回到刚开始的位置 让他现在的第一个li标签去到最下面循环
$(function() {
// setInterval
// clearInterval
// find
// animate
// appendTo
// mousemove
// mouseout
// css
var time = setInterval(function() {
$('.notic').find('ul').animate({
marginTop: "-45px"
}, 500, function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
})
}, 3000); //公告列表滚动
$('.notic ul').find('li').mousemove(function() {
//当鼠标放到li标签上时 取消定时器效果
// clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
// clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
clearInterval(time);
}).mouseout(function() {
time = setInterval(function() {
$('.notic').find('ul').animate({
marginTop: "-45px"
}, 500, function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
})
}, 3000);
});
});
</script>
</body>
</html>
