您的位置：首页 > 编程技术 > js  >  JS实现的N多简单无缝滚动代码(包含图文效果)

JS实现的N多简单无缝滚动代码(包含图文效果)

 更新时间：2015年11月8日 20:27  点击：2806

本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：

实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。

接着滚动开始，当滚动条到达元素的中间位置时：

不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素，然后再在里面设置margin或者padding！

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-n-txt-pic-scroll-codes/

具体代码如下：

<!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程序设计有所帮助。

[!--infotagslink--]

相关文章

  • 不打开网页直接查看网站的源代码

    　　有一种方法，可以不打开网站而直接查看到这个网站的源代码.. 　　这样可以有效地防止误入恶意网站... 　　在浏览器地址栏输入： 　　view-source:http://...2016-09-20

  • php 调用goolge地图代码

    <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25

  • JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，...2015-10-21

  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • php 取除连续空格与换行代码

    php 取除连续空格与换行代码，这些我们都用到str_replace与正则函数 第一种： $content=str_replace("n","",$content); echo $content; 第二种： $content=preg_replac...2016-11-25

  • php简单用户登陆程序代码

    php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦，这款就下面这一点点代码了哦。 <center> <p>&nbsp;</p> <p>&nbsp;</p> <form name="form1...2016-11-25

  • PHP实现清除wordpress里恶意代码

    公司一些wordpress网站由于下载的插件存在恶意代码，导致整个服务器所有网站PHP文件都存在恶意代码，就写了个简单的脚本清除。恶意代码示例...2015-10-23

  • js识别uc浏览器的代码

    其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30

  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08

  • PHP开发微信支付的代码分享

    微信支付，即便交了保证金，你还是处理测试阶段，不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中，才能申请发布。然后，因为在微信中是通过JS方式调用API，必须在微信后台设置支付授权目录，而且要到...2014-05-31

  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24

  • php怎么用拼音 简单的php中文转拼音的实现代码

    小编分享了一段简单的php中文转拼音的实现代码，代码简单易懂，适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06

  • php导出csv格式数据并将数字转换成文本的思路以及代码分享

    php导出csv格式数据实现：先定义一个字符串 存储内容，例如 $exportdata = '规则111,规则222,审222,规222,服2222,规则1,规则2,规则3,匹配字符,设置时间,有效期'."/n";然后对需要保存csv的数组进行foreach循环，例如复制代...2014-06-07

  • ecshop商品无限级分类代码

    ecshop商品无限级分类代码 function cat_options($spec_cat_id, $arr) { static $cat_options = array(); if (isset($cat_options[$spec_cat_id]))...2016-11-25

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载，加快网页的访问速度。 当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点...2013-10-13

  • js实现文字垂直滚动和鼠标悬停效果

    这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-05

  • 基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解

    这篇文章主要介绍了基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-08

  • 使用jQuery.Pin垂直滚动时固定导航

    这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27