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 相关文章推荐
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
微信小程序实现多选功能
Nov 04 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python能自学吗
2020/06/18 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
小学作文评语大全
2014/04/21 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
房产公证书
2015/01/23 职场文书
个人自荐书怎么写
2015/03/26 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书