javascript实现无缝上下滚动特效
更新时间：2015年12月16日 16:13:04 投稿：lijiao
这篇文章主要介绍了javascript实现无缝上下滚动特效的相关资料,需要的朋友可以参考下
本文实例讲解了javascript实现无缝上下滚动的代码，分享给大家供大家参考，具体内容如下
js实现上下无缝滚动的原理是这样的：
1、首先给容器设定高度或宽度，然后overflow:hidden；
2、容器高度设定后，内容超出则被隐藏。
3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动一个节点的位置（滚动的原理）；
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时，设置scrollTop=0，并把把子节点树中的第一个移动到最后，重新开始滚动，无间断循环滚动效果就出现了。
效果图如下：
代码如下：
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
随着多核cpu的普级,并发/并行多线程运算在主流的编程语言越来越流行,而在目前Javascript实现中还看不到在语言方面支持多线程,现在Javascript如此流行,真希望今后会在语言的层面有很大的变化.2010-11-11
本文给大家分享的是使用javascript实现仿制苹果的悬浮虚拟按钮的代码，非常的简单，给大家一个思路，大家可以根据自己的情况自由扩展。2016-04-04
在现代软件开发中,数据结构的设计至关重要,它直接影响到程序的性能和可维护性,TypeScript 作为一种静态类型的超集,为 JavaScript 带来了类型系统,本文将探讨如何利用 TypeScript 的接口（Interfaces）来优化数据结构,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
本文介绍了Date对象的使用方法，清晰明了，实现方法有多种，仅供大家参考，希望对大家有所帮助，下面就跟小编一起来看看吧2016-11-11
IE6/7/8中Option元素未设value时Select将获取空字符串
可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的（客户端程序员想要的）结果value，其容错性比IE6/7/8做的更好。2011-04-04
Hash 可以看作是一个 关联数组，它对每一个值都绑定了一个唯一的键（值并不必须是唯一的）， 然而，它不能保证迭代时元素的顺序始终一致。因为 JavaScript 程序语言的特性，每个对象实际上都是一个 hash,下面我们就来详细探讨下。2015-05-05
这篇文章主要介绍了nuxt中使用路由守卫的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要介绍了JS常用倒计时代码,结合实例形式总结分析了JS常用的倒计时功能实现方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了js实现可多次定时的倒计时小实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论