HTML代码:
<div id="ad">
<div style="width:570px;height:22px;background-image: url(img/red-back.jpg);">
<a href="#1">关闭</a>
</div>
<div id="ad_content">
<div style="height: 200px;overflow: hidden;direction: up;">
<ul class="js-slide-list">
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
</div>
</div>
</div>
CSS代码:
body,
html {margin: 0;padding: 0;font-size: 12px;
font-family: Arial;font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif;}
.fixedMask {position: fixed;display: none;top: 0;
left: 0;z-index: 999;width: 100%;
height: 100%;background: #000;
filter: alpha(opacity=30);opacity: 0.3;}
* html {background: url(*) fixed;}
* html body {margin: 0;height: 100%;}
* html .fixedMask {position: absolute;
left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);}
#ad {width: 570px;height: 345px;position: absolute;
z-index: 9999;left: 50%;margin-left: -290px;
top: 50%;margin-top: -175px;display: none;}
#ad a {display: block;position: absolute;
text-decoration: none;right: 0;top: 0px;
font: 12px/1.5 arial;background: #B50000;
padding: 2px 5px;color: #fff;}
#ad a:hover {background: red;}
#ad_content {font-size: 14px;font-family: "courier new";
background-image: url(img/red-back.jpg);
height: 323px;}
#ad_content ul {list-style: none;padding: 0px;
width: 400px;margin-left: 70px;}
#ad_content li {margin-bottom: 10px;color: white;}
JS代码:
$(function() {
var doscroll = function() {
var $parent = $('.js-slide-list');
var $first = $parent.find('li:first');
var height = $first.height();
$first.animate({marginTop: -height + 'px'}, 500,
function() {
$first.css('marginTop',0).appendTo($parent);
});
};
setInterval(function() {
doscroll()
}, 2000);
})