栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

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

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

运行效果截图如下:

在线演示地址如下:

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

具体代码如下:






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"

希望本文所述对大家Javascript程序设计有所帮助。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/100085.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号