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 相关文章推荐
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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实现单链表的实例代码
2013/03/22 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php生成curl命令行的方法
2015/12/14 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python简单分割文件的方法
2015/07/30 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
思想品德课教学反思
2014/02/10 职场文书
免职通知
2015/04/23 职场文书
小学教师读书笔记
2015/07/01 职场文书