页面代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css/global.css" rel="stylesheet"/>
<link href="css/layout.css" rel="stylesheet"/>
<link href="css/template.css" rel="stylesheet" />
</head>
<body>
<section id="silder">
<!--书讯快递-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess" style=" vertical-align:text-bottom;"/>书讯快递</div>
<div class="book_class">
<div id="dome">
<div id="dome1">
<ul id="express">
<li>・2010考研英语大纲到货75折...</li>
<li>・权威定本四大名著(人民文...</li>
<li>・口述历史权威唐德刚先生国...</li>
<li>・袁伟民与体坛风云:实话实...</li>
<li>・我们台湾这些年:轰动两岸...</li>
<li>・畅销教辅推荐:精品套书50...</li>
<li>・2010版法律硕士联考大纲75...</li>
<li>・计算机新书畅销书75折抢购</li>
<li>・2009年孩子最喜欢的书>></li>
<li>・弗洛伊德作品精选集59折</li>
<li>・2010考研英语大纲到货75折...</li>
<li>・权威定本四大名著(人民文...</li>
<li>・口述历史权威唐德刚先生国...</li>
<li>・袁伟民与体坛风云:实话实...</li>
<li>・我们台湾这些年:轰动两岸...</li>
<li>・畅销教辅推荐:精品套书50...</li>
<li>・2010版法律硕士联考大纲75...</li>
<li>・计算机新书畅销书75折抢购</li>
<li>・2009年孩子最喜欢的书>></li>
<li>・弗洛伊德作品精选集59折</li>
<li>・2010考研英语大纲到货75折...</li>
<li>・权威定本四大名著(人民文...</li>
<li>・口述历史权威唐德刚先生国...</li>
<li>・袁伟民与体坛风云:实话实...</li>
<li>・我们台湾这些年:轰动两岸...</li>
<li>・畅销教辅推荐:精品套书50...</li>
<li>・2010版法律硕士联考大纲75...</li>
<li>・计算机新书畅销书75折抢购</li>
<li>・2009年孩子最喜欢的书>></li>
<li>・弗洛伊德作品精选集59折</li>
<li>・2010考研英语大纲到货75折...</li>
<li>・权威定本四大名著(人民文...</li>
<li>・口述历史权威唐德刚先生国...</li>
<li>・袁伟民与体坛风云:实话实...</li>
<li>・我们台湾这些年:轰动两岸...</li>
<li>・畅销教辅推荐:精品套书50...</li>
<li>・2010版法律硕士联考大纲75...</li>
<li>・计算机新书畅销书75折抢购</li>
<li>・2009年孩子最喜欢的书>></li>
<li>・弗洛伊德作品精选集59折</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
//滚动代码
var marginTop =0;
var interval = setInterval(function(){
$("#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);
</script>
</html>
页面效果由下至上滚动: