超多简单的无缝滚动代码，文字+图片

小提示

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=utf-8" />
<style type="text/css">
body{width:80%;margin:0 auto;color:#00a;}
h2{font-size:120%;margin:1em auto;text-align:center;}
div{border:solid 1px #0a0;font-size:12px;overflow:hidden;width:500px;margin:1em auto;}
p{padding:0;margin:0;}
p span{display:inline-block;margin:1em;}
p b{margin:1em .5em;display:inline-block;font-size:120%;color:red;}
.tips{border:solid 1px red;background:#FFC;padding:.5em;}
</style>
<title>无缝滚动</title>
</head>
<body>
<h1>较简单的无缝滚动实现办法</h1>
<p class="tips">切记：不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素，然后再在里面设置margin或者padding！为什么滚动到一半就跳转到顶部了呢？因为obj.innerHTML=obj.innerHTML+obj.innerHTML，它迷惑了你。。。。</p>
<h2>第一个，设置非标准属性delay，所以要快些</h2>
<div class="seamless" style="height:100px;" id="obj" delay="10">
	<p><span>蓝色理想维基是一个以蓝色理想社区 用户为基础的维基系统。 只要是社区的用户，并达到初级用户级别，就能对本站的页面进行增加和编辑。</span></p>
	<p><span>我们目前使用这套系统来完成我们网站的各项帮助。比如论坛怎么使用，怎么找回密码一类的问题。另外还用来记录一些网站，会员的各项历史信息。</span></p>
	<p><span>长期的打算是解决社区的技术版块中重复提出的基础问题。因为论坛回复很不规范，需要用户自己从回复中整理和测试，另外很容易被帖子内容淹没，没有有效地进行整理和规范。</span></p>
	<p><span>我们想利用高素质的网站会员在HTML方面的专业知识，来完成一个协作的WEB知识库，造福大众。</span></p>
	<p><span>蓝色理想维基标识设计师是:bobpop，标识版权属于支付宝。</span></p>
</div>
<h2>第二个，如果未设置delay，则默认100毫秒的频率滚动</h2>
<div class="seamless" style="height:50px;">
	<p><span>缺陷：不能对子标签设置margin或者padding。</span></p>
	<p><span>怎么办呢？跟上面一样，里面套一个span标签，然后就可以设置margin，padding了。</span></p>
	<p><span>算是一个缺点吧。</span></p>
</div>
<h2>第三个，可以停止的，因为class="seamless <strong style="color:red;">allowStop</strong>"</h2>
<div class="seamless allowStop" style="height:90px;width:150px;" delay="10">
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a3217fba7e1.gif" width="" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a321825232e.gif" width="50" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a32182a88b4.gif" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a321834b341.gif" width="90" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a32183a3798.gif" width="120" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a32184158d5.gif" width="40" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a32185cf0bd.gif" align="right" height="40" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a321863523f.gif" width="70" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a3218716feb.gif" /></span></p>
	<p><span><img src="//ku.shouce.ren/files/images/201601/56a321877fa37.gif" /></span></p>
</div>
</body>
</html>
<script type="text/javascript">
(function(c){
	var obj=document.getElementsByTagName("div");
	var _l=obj.length;
	var o;
	for(var i=0;i<_l;i++){
		o=obj[i];
		var n2=o.clientHeight;
		var n3=o.scrollHeight;
		o.s=0;
		if(o.className.indexOf(c)>=0){
			if(n3<=n2){return false;}
			var delay=parseInt(o.getAttribute("delay"),10);
			if(isNaN(delay)){delay=100;}
			if(o.className.indexOf("allowStop")>=0){
				o.onmouseover=function(){this.Stop=true;}
				o.onmouseout=function(){this.Stop=false;}
			}
			giveInterval(autoRun,delay,o);
			//关键之处！！
			o.innerHTML=o.innerHTML+o.innerHTML;
		}
	}
	//注册函数
	function giveInterval(funcName,time){var args=[];for(var i=2;i<arguments.length;i++){args.push(arguments[i]);}return window.setInterval(function(){funcName.apply(this,args);},time);}
	function autoRun(o,s){
		if(o.Stop==true){return false;}
		var n1=o.scrollTop;
		var n3=o.scrollHeight;
		o.s++;
		o.scrollTop=o.s;
		if(n1>=n3/2){
			o.scrollTop=0;
			o.s=0;
			
		}
	}
})('seamless')
</script>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

超多简单的无缝滚动代码，文字+图片

分类

网站常用

描述

原理很简单，注册事件之后，立即将元素的innerHTML累加一次。 <br>　　接着滚动开始，当滚动条到达元素的中间位置时： <br>　　不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的...