<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>不间断向上滚动</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="xst" style="width:290px;height:170px;">
<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试111</p>
</div>
<script>
function addEventSimple(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + evt, fn);
}
}
addEventSimple(window, 'load', initScrolling);
var scrollingBox;
var scrollingInterval;
var reachedBottom = false;
var bottom;
function initScrolling() {
scrollingBox = document.getElementById('xst');
scrollingBox.style.overflow = "hidden";
scrollingInterval = setInterval("scrolling()", 50);
scrollingBox.onmouseover = over;
scrollingBox.onmouseout = out;
}
function scrolling() {
var origin = scrollingBox.scrollTop++;
if (origin == scrollingBox.scrollTop) {
if (!reachedBottom) {
scrollingBox.innerHTML += scrollingBox.innerHTML;
reachedBottom = true;
bottom = origin;
} else {
scrollingBox.scrollTop = bottom;
}
}
}
function over() {
clearInterval(scrollingInterval);
}
function out() {
scrollingInterval = setInterval("scrolling()", 50);
}
</script>
</body>
</html>
文字不间断向上滚动效果完整代码，无缝轮播原理
内容版权声明：除非注明，否则皆为本站原创文章。