js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果)，本文实例讲述了JS实现的N多简 - phpStudy...

JS实现的N多简单无缝滚动代码(包含图文效果)

本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：

实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。

接着滚动开始，当滚动条到达元素的中间位置时：

不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素，然后再在里面设置margin或者padding！

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-n-txt-pic-scroll-codes/

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

无缝滚动

较简单的无缝滚动实现办法

切记：不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素，然后再在里面设置margin或者padding！为什么滚动到一半就跳转到顶部了呢？因为obj.innerHTML=obj.innerHTML+obj.innerHTML，它迷惑了你。。。。

第一个，设置非标准属性delay，所以要快些

蓝色理想维基是一个以蓝色理想社区 用户为基础的维基系统。 只要是社区的用户，并达到初级用户级别，就能对本站的页面进行增加和编辑。

我们目前使用这套系统来完成我们网站的各项帮助。比如论坛怎么使用，怎么找回密码一类的问题。另外还用来记录一些网站，会员的各项历史信息。

长期的打算是解决社区的技术版块中重复提出的基础问题。因为论坛回复很不规范，需要用户自己从回复中整理和测试，另外很容易被帖子内容淹没，没有有效地进行整理和规范。

我们想利用高素质的网站会员在HTML方面的专业知识，来完成一个协作的WEB知识库，造福大众。

蓝色理想维基标识设计师是:bobpop，标识版权属于支付宝。

第二个，如果未设置delay，则默认100毫秒的频率滚动

缺陷：不能对子标签设置margin或者padding。

怎么办呢？跟上面一样，里面套一个span标签，然后就可以设置margin，padding了。

算是一个缺点吧。

第三个，可以停止的，因为class="seamless allowStop"

(function(c){

var obj=document.getElementsByTagName("div");

var _l=obj.length;

var o;

for(var i=0;i<_l>

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.οnmοuseοver=function(){this.Stop=true;}

o.οnmοuseοut=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

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

希望本文所述对大家JavaScript程序设计有所帮助。相关阅读:

js省市联动效果完整实例代码

jquery对象访问是什么及使用方法介绍

Mac怎么利用蓝牙连接外键盘？苹果电脑Mac使用蓝牙连接外键盘教程

php短网址和数字之间相互转换的方法

jquery遍历select元素(实例讲解)

laravel学习教程之关联模型

C#使用foreach循环遍历数组完整实例

HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)

PHP过滤★等特殊符号的正则

jQuery实现仿路边灯箱广告图片轮播效果

JavaScript保留两位小数的2个自定义函数

Javascript类型转换的规则实例解析

Win10出现Bad pool caller蓝屏故障的解决方法

Java通过反射机制动态设置对象属性值的方法