Js无缝滚动代码

最新推荐文章于 2025-06-11 12:51:21 发布

原创最新推荐文章于 2025-06-11 12:51:21 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#timer #function #null #border #class #xhtml

js/jquery 专栏收录该内容

31 篇文章

订阅专栏

一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部元素的方式来保持滚动，所以只要原始内容尺寸超过容器对应尺寸的1/4就能滚动，降低了之前两次循环元素时的滚动门槛。
　　第一个参数 con_id 是用于JS找到元素的，是滚动元素的id。
　　第二个参数 speed_num 是用来设置滚动速度的，数值越大，滚动速度越慢；单位默认是毫秒，不用写，只要写个正整数即可。
　　第三个参数 direct 是用来控制滚动方向的，top/bottom/left/right,如果不是这四个值，则水平滚动默认向左，竖直滚动默认向上。注意几点：
　　1、水平滚动的容器id给出的容器能且仅能有一个直接子节点！

　　2、使用方式是在页面头部引入此文件，在需要滚动的容器的闭合标签后调用对应的滚动方法scrollSP(con_id,speed,direct)、scrollSZ(con_id,speed,direct)。

<!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=gb2312" />
<title>滚动代码</title>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.top_1{ height:100px; width:200px; border:1px solid #333333; margin:0 auto;}
.top_1 p{ height:30px; line-height:30px; margin-top:10px;}
.left_1{ width:500px; height:100px; margin:0 auto;}
.left_1 ul{}
.left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;}
.left_1 p{ width:50px; he
	100px; line-height:100px;}
.left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;}	
</style>
<script language="javascript">
function scrollSZ(con_id,speed,direct){
	var con,items,heightHalf,heightAll;
	var timer;
	speed = parseInt(speed);//获取设置的速度参数
	con = document.getElementById(con_id);
	con.style.overflow = "hidden";
	if(direct == "top"){
		direct = "top";
	}else if(direct == "bottom"){
		direct = "bottom";
	}else{
		direct = "top";
	}
	
	con.innerHTML +=con.innerHTML;
	con.innerHTML +=con.innerHTML;
	items = getChildNodes(con);
	if(items.length < 1){
		return;
	}
	heightAll = 0;
	for(var i=0;i<items.length;i++){
		var numTop,numBottom;
		if (!!window.ActiveXObject){
			numTop = items[i].currentStyle["marginTop"];
			numBottom = items[i].currentStyle["marginBottom"];
		}else{
			numTop = document.defaultView.getComputedStyle(items[i],null)["marginTop"];
			numBottom = document.defaultView.getComputedStyle(items[i],null)["marginBottom"];
		}
		numTop = parseInt(numTop);
		numBottom = parseInt(numBottom);
		numTop += numBottom;
		if(numTop >0){
			heightAll += numTop;
		}
		heightAll += items[i].offsetHeight;
	}
	heightHalf = heightAll/2;
	if(direct == "bottom"){
		con.scrollTop = heightHalf;
		timer = setInterval(_scrollBottom,speed);		
	}else if(direct == "top"){
		timer = setInterval(_scrollTop,speed);
	}
	con.onmouseover = function(){
		if(timer){
			clearInterval(timer);
			timer = null;
		}
	};
	con.onmouseout = function(){
		if(!timer){
			if(direct == "top"){
				timer = setInterval(_scrollTop,speed);
			}else if(direct == "bottom"){
				timer = setInterval(_scrollBottom,speed);
			}
			
		}
	};
	function _scrollTop(){
		if(con.scrollTop < heightHalf){
			con.scrollTop += 2;
		}else{
			con.scrollTop = 0;
		}
	}
	function _scrollBottom(){
		if(con.scrollTop > 0){
			con.scrollTop -= 2;
		}else{
			con.scrollTop = heightHalf;
		}
	}
}

function scrollSP(con_id,speed,direct){
	var con,innerCon,timer,items,widthAll,widthHalf;
	speed = parseInt(speed);
	con = document.getElementById(con_id);
	con.style.overflow = "hidden";
	items = getChildNodes(con);
	if(items.length == 1){
		innerCon = items[0];
	}else{	
		return;
	}
	innerCon.innerHTML += innerCon.innerHTML;
	innerCon.innerHTML += innerCon.innerHTML;
	items = getChildNodes(innerCon);
	if(items.length<1){
		return;
	}
	widthAll = 0;
	for(var i=0;i<items.length;i++){
		
	}
	
	for(var i=0;i<items.length;i++){
		var numLeft,numRight;
		if (!!window.ActiveXObject){
			items[i].style.styleFloat = "left";
			numLeft = items[i].currentStyle["marginLeft"];
			numRight = items[i].currentStyle["marginRight"];
		}else{
			items[i].style.cssFloat = "left";
			numLeft = document.defaultView.getComputedStyle(items[i],null)["marginLeft"];
			numRight = document.defaultView.getComputedStyle(items[i],null)["marginRight"];
		} 
		numLeft = parseInt(numLeft);
		numRight = parseInt(numRight);
		numLeft += numRight;
		if(numLeft>0){
			widthAll += numLeft;
		}
		widthAll += items[i].offsetWidth;
	}
	widthHalf = widthAll/2;	
	innerCon.style.width = widthAll+"px";
	if(direct == "left"){
		direct = "left";
	}else if(direct == "right"){
		direct = "right";
	}else{
		direct = "left"
	}
	if(direct == "left"){
		timer = setInterval(_scrollLeft,speed);
	}else if(direct == "right"){
		con.scrollLeft = widthHalf;
		timer = setInterval(_scrollRight,speed);
	}
	con.onmouseover = function(){
		if(timer){
			clearInterval(timer);
			timer = null;
		}
	}
	con.onmouseout = function(){
		if(direct == "left"){
			timer = setInterval(_scrollLeft,speed);
		}else{
			timer = setInterval(_scrollRight,speed);
		}
	}
	function _scrollLeft(){
		
		if(con.scrollLeft<widthHalf){
			con.scrollLeft += 2;
		}else{
			con.scrollLeft = 0;
		}
	}
	function _scrollRight(){
		if(con.scrollLeft>0){
			con.scrollLeft -= 2;
		}else{
			con.scrollLeft = widthHalf;
		}
	}
}
function getChildNodes(obj){//获取元素子节点
	var childList,list;
	childList = new Array();
	list = obj.childNodes;
	for(var i=0;i<list.length;i++){
		if(list[i].nodeType == 1)
		childList[childList.length] = list[i];
	}
	return childList;
}
</script>
</head>

<body>
<div id="top_1" class="top_1">
	<p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div>b</div>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div>a</div>
</div>
<script language="javascript">scrollSZ("top_1",10,"bottom");</script>
<div id="left_1" class="left_1">
	<div class="left_1_i">
		<p>1</p>
	    <p>2</p>
	    <p>3</p>
	    <p>4</p>
	    <div>b</div>
	    <div>a</div>
	</div>
</div>
<script language="javascript">scrollSP("left_1",10,"right");</script>
</body>
</html>