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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
xml和web特殊字符
Apr 28 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
第四章 php数学运算
2011/12/30 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
php字符串操作常见问题小结
2016/10/11 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
layui清空,重置表单数据的实例
2019/09/12 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Python 元类实例解析
2018/04/04 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
.NET笔试题(20个问题)
2016/02/02 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
新娘父亲婚礼致辞
2014/01/16 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
JavaScript的function函数详细介绍
2021/11/20 Javascript