<script type="text/javascript" src="jquery.js"></script>
<DIV style="OVERFLOW: hidden;height: 200px;background-color:yellow;" class=sidlis>
<UL id=ticker>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
<li>测试一下滚动条</li>
</UL>
<!-- 公告栏目的滚动效果 -->
<SCRIPT type=text/javascript>
$(function() {
var ticker = $("#ticker");
ticker.children().filter("li").each(function() {
var dt = $(this),
container = $("<div>");
dt.next().appendTo(container);
dt.prependTo(container);
container.appendTo(ticker);
});
ticker.css("overflow", "hidden");
function animator(currentItem) {
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.015;
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
animator(currentItem.parent().children(":first"));
});
};
animator(ticker.children(":first"));
ticker.mouseenter(function() {
ticker.children().stop();
});
ticker.mouseleave(function() {
animator(ticker.children(":first"));
});
});
</SCRIPT>
</DIV>