文字+图片无缝滚动兼容ie 360 火狐谷歌 [花20积分买的]

最新推荐文章于 2018-04-10 00:48:08 发布

太羽

最新推荐文章于 2018-04-10 00:48:08 发布

阅读量838

点赞数

分类专栏：切图

切图专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js无缝滚动制作</title>
</head>

<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-size:12px;}
a,img{border:0;}

.scroll{height:300px;width:500px;}
.scroll p{line-height:20px;padding:5px 0;}
.scroll p a{color:#3366cc;text-decoration:none;}
</style>

<script type="text/javascript">
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>
<div class="scroll" id="xst">
	<p><a href="#">skksdghkdhgbkjdgbk</a></p>
	<p><a href="#">11111111111111111111111111111</a></p>
	<p><a href="#">11111111111111111111111111111</a></p>
	<p><a href="#">skksdghkdhgbkjdgbk</a></p>
	<p><a href="#">11111111111111111111111111111</a></p>
	<p><a href="#">11111111111111111111111111111</a></p>
	<p><a href="#">skksdghkdhgbkjdgbk</a></p>
	<p><a href="#">11111111111111111111111111111</a></p>
	<p><a href="#">skksdghkdhgbkjdgbk</a></p>
</div>
</body>

太羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字+图片无缝滚动兼容ie 360 火狐谷歌 [花20积分买的]

js无缝滚动制作js文字无缝滚动和js图片无缝滚动*{margin:0;padding:0;list-style-type:none;font-size:12px;}a,img{border:0;}.scroll{height:300px;width:500px;}.scroll p{line-height:20px;padding:5px 0;}.scroll p a{co
复制链接

扫一扫