<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/scroll.css" />
</head>
<body>
<ul id="express">
<li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
<li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
<li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
<li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
<li><span>【公告】</span><a href="#">家电低至五折</a></li>
<li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
<li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
<li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
<li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
<li><span>【公告】</span><a href="#">家电低至五折</a></li>
</ul>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
function movedown(){
var marginTop = 0 ;
var stop =false;
var interval = setInterval(function(){
if(stop) return;
$('#express').children('li').first().animate({
'margin-top':marginTop--},
0,
function(){
var $first =$(this);
if(!$first.is(':animated')){
if((-marginTop)>$first.height()){
$first.css({'margin-top':0}).appendTo($('#express'));
marginTop = 0;
}
}
});
},50);
$('#express').mouseover(function(){
stop = true;
}).mouseout(function(){
stop = false;
});
}
movedown();
});
</script>
</body>
</html>
*{
padding:0px;
margin:0px;
}
a {
color: #555555;
text-decoration: none;
}
a:hover {
color: #ff4e00;
}
ul{
padding:10px;
height:146px;
width:250px;
border:1px solid black;
overflow: hidden;
}
li{
font-size:14px;
}
