JS实现的N多简单无缝滚动代码(包含图文效果)
本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：
实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。
接着滚动开始，当滚动条到达元素的中间位置时：
不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素，然后再在里面设置margin或者padding！
运行效果截图如下：
在线演示地址如下：
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/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="9">
<p><span><img src="images/frown.gif" width="50" /></span></p>
<p><span><img src="images/redface.gif" /></span></p>
<p><span><img src="images/biggrin.gif" width="90" /></span></p>
<p><span><img src="images/wink.gif" width="120" /></span></p>
<p><span><img src="images/tongue.gif" width="40" /></span></p>
<p><span><img src="images/cool.gif" align="right" height="40" /></span></p>
<p><span><img src="images/rolleyes.gif" width="70" /></span></p>
<p><span><img src="images/confused.gif" /></span></p>
<p><span><img src="images/han.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>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JQuery插件Marquee.js实现无缝滚动效果
Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次
-
javascript实现左右控制无缝滚动
无缝滚动是项目中经常需要用到的一种特效,网上也有很多的示例代码,这里给大家分享的是一段比较简单实用的,而且兼容性也不错的代码,小伙伴们仔细研究下吧. html 代码: 复制代码 代码如下: <</SPAN>html> <</SPAN>head lang="en"> <</SPAN>meta charset="UTF-8"> <</SPAN>title>无缝
-
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter
-
使用Javascript简单实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: 先睹为快:demo 复制代码 代码如下: <!DOC
-
JavaScript无缝滚动效果的实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!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" xml:lang="en"&
-
js代码实现无缝滚动(文字和图片)
一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
-
Javascript 实现图片无缝滚动
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 复制代码 代码如下: <style type="text/css"> * { margin: 0; padding: 0; } #div1 { overflow: hidden; width: 71
-
JS实现的N多简单无缝滚动代码(包含图文效果)
本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2
-
原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码. 原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
-
vue实现简单无缝滚动效果
本文实例为大家分享了vue实现简单无缝滚动的具体代码,供大家参考,具体内容如下 效果 实现思路 在vue中如何复制一份列表出来呢且不能丢失绑定的事件,很简单使用slot插槽,使用两个插槽我们就拥有了两个列表 <div class="listScroll" ref="box"> <slot></slot> <slot></slot> </div> 组件完整代码 <templa
-
jquery简单实现纵向的无缝滚动代码实例
简单实现纵向无缝滚动(不要忘记引入jquery文件哦) 看效果: 1.HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的jQuery无缝向上滚动效果</title> </head> <body> <div class="myscroll&qu
-
js实现无缝滚动双图切换效果
本文记录的是在html中写两个img实现多张图片的无缝滚动,供大家参考,具体内容如下 html结构如下: <div class="wrap"> <ul class="list"> <li> <img src="img/img0.png"> </li> <li> <img src="img/img1.png"> </li> </
-
彻底搞懂JS无缝滚动代码
在做个东西要滚动代码 而且是无缝的 搞了半天还是不行 决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600> <table align=top> <tr> <td id=demo1 valign=top> <p>aaaaaaaaaa
-
图片无缝滚动代码(向左/向下/向上)
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,
-
js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: <!DOCTYPE html> <html
-
vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理
目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一.简单介绍 二.安装和使用 三.效果图 四.vue-seamless-scroll 点击事件实现原理 五.简单实现 六.关键代码 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用. 本节介绍,vue 中添加 vue-seamless-scroll,简