JS实现的n个简单的无缝滚动代码(包括图文效果)

本文讲述了一个由JS实现的n个简单无缝滚动代码的例子。分享给大家参考，如下：

实现原理简单。注册一个事件后，元素的innerHTML会累积一次。

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

不要在子元素上设置边距和填充，因为CSS在边距或填充上的叠加机制会导致滚动时“跳跃”。安全的方法是设置一个内联元素，然后在其中设置边距或填充！

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style type=' text/CSS ' body { width :80%；margin:0 autocolor: # 00a} H2 { font-size :120%；margin:1em auto文本对齐：居中；} div { border:solid 1px # 0a0font-size :12 px；飞越：隐藏；宽度width:500pxmargin:1em auto} p { padding:0margin:0} p span { display : inline-block；余量：1 em；} p b { margin 33601 em . 5 em；display : inline-block；font-size :120%；color:red}.tips { border:solid 1px red背景： # FFC；padding:5em}/styletitle无缝滚动/title/head dyh 1简单的无缝滚动方法/h1p class='tips '记住：不要在子元素上设置边距和填充，因为在边距或填充上的CSS叠加机制会导致滚动中的“跳跃”。安全的方法是设置一个内联元素，然后在其中设置边距或填充！为什么滚动到一半就跳到顶部了？因为obj . innerhtml=obj . innerhtml obj . innerhtml，让你很困惑。/ph2首先设置非标准属性延迟，这样更快/h2div class='无缝' style=' height :100pxid=' obj ' delay=' 10 ' PS pan blue ideal wiki是基于blue ideal社区用户的wiki系统。只要您是社区用户并达到主要用户级别，您就可以添加和编辑此网站的页面。/span/p pspan目前，我们使用这个系统来完成我们网站上的各种帮助。比如如何使用论坛，如何找回密码。也用来记录一些网站和会员的历史信息。/span/p pspan的长期计划是解决在社区的技术部分反复提出的基本问题。由于论坛回复非常不规范，用户需要从回复中进行整理和测试，很容易被帖子内容淹没，没有有效整理和规范。/span/p pspan我们希望利用高质量网站成员在HTML方面的专业知识，完成一个协作式的WEB知识库，以造福大众。/span/p pspan Blue Ideal Wiki Logo Designer为：bobpop，Logo版权归支付宝所有。/span/p/divh2其次，如果未设置延迟，默认频率为100ms/h2div class='无缝' style=' height:50pxPspan缺陷：无法为子选项卡设置边距或填充。/span/p pspan怎么样？如上，在里面放一个span标签，然后你可以设置边距，填充。/span/p pspan是一个缺点。

/span/p/divh2第三个，可以停止的，因为类='无缝强风格=' color : redallowstop/strong/H2 div class='无缝allowStop ' style=' height :90 px；宽度width :150 px ' delay=' 9 ' PS panimg src=' http : images/皱眉。gif ' width=' 50 '/span/p PS panimg src=' http : images/redface。gif '/span/p PS panimg src=' http : images/big rin。gif ' width=' 90 '/span/p PS panimg src=' http : images/wink。gif ' width=' 120 '/span/pvar _ l=obj . length var o；for(var I=0；I _ l；I){ o=obj[I]；var N2=o . clientheightvar n3=o . scrollheighto。s=0；if(o .类名。indexof(c)=0){ if(n3=N2){ return false；} var delay=ParSeint(o . GetAttribute(' delay ')，10)；if(isNaN(delay)){ delay=100；} if(o .类名。indexof(' allowStop ')=0){ o . onmouseover=function(){ this .stop=true } o . onmouseout=function(){ this .stop=false } } give interval(autoRun，delay，o)；//关键之处！o . innerHTMl=o . innerHTMl o . innerHTMl；} } //注册函数函数giveInterval(funcName，time){ var args=[]；对于(var I=2；长度；I){ args。推(引数[I])；}返回窗户。set interval(function(){ funcname。应用(这个，args)；},时间);}函数autoRun(o，s){ if(o . Stop==true){ return false；} var n1=o . scroll topvar n3=o . scroll heighto . so。滚动ToP=o . s；if(n1=n3/2){ o .滚动顶部=0；o . s=0；} }})("无缝")/脚本希望本文所述对大家Java脚本语言程序设计有所帮助。