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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
解析Python编程中的包结构
2015/10/25 Python
python判断数字是否是超级素数幂
2018/09/27 Python
详解Python装饰器
2019/03/25 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python 去除字符串中指定字符串
2020/03/05 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
财务主管的岗位职责
2013/12/30 职场文书
励志演讲稿800字
2014/08/21 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
怎样写好工作计划
2019/04/10 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL