Js无缝滚动代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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;
		}
	}
}

<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js无缝滚动代码

分类

图片代码

描述

一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部...