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


Posted in Javascript onNovember 06, 2015

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

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

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
JS日期加减,日期运算代码
Nov 05 #Javascript
程序员必知35个jQuery 代码片段
Nov 05 #Javascript
js如何实现淡入淡出效果
Nov 18 #Javascript
JavaScript数组去重的五种方法
Nov 05 #Javascript
javascript实现tab切换的两个实例
Nov 05 #Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 #Javascript
You might like
PHP中常用的输出函数总结
2014/09/22 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
帝国cms常用标签汇总
2015/07/06 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
offsetParent 算法分析
2010/04/05 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
python if not in 多条件判断代码
2016/09/21 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python实现简单登陆流程的方法
2018/04/22 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
打架检讨书100字
2014/01/08 职场文书
小学生获奖感言范文
2014/02/02 职场文书
施工安全承诺书
2014/05/22 职场文书
应届生自荐信
2014/06/30 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
企业法人代表证明书
2015/06/18 职场文书
教师节主题班会方案
2015/08/17 职场文书
导游词书写之黄山
2019/08/06 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
使用tensorflow 实现反向传播求导
2021/05/26 Python