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 URL编码和解码使用说明
Apr 12 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
ES6解构赋值实例详解
Oct 31 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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 register_shutdown_function函数的深入解析
2013/06/03 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
工程项目经理任命书
2014/06/05 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
解析Java异步之call future
2021/06/14 Java/Android