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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
这篇文章主要介绍了JS实现“隐藏与显示”功能的多种方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
本文主要给大家介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验，2016-05-05
某些情况下我们需要获取中文字符串的实际长度，下面有个示例，大家可以参考下2014-06-06
生命周期是指一个对象从创建→>运行>销毁的整个阶段，强调的是一个时间段，文中介绍了生命周期的分类和微信小程序应用，需要的朋友可以参考下2022-08-08
JavaScript在执行代码前,会进行一个预编译的过程,这个过程主要用于处理变量和函数声明,预编译分为全局预编译和函数预编译,本文将给大家详细的介绍一下JavaScript预编译的基本概念和过程,需要的朋友可以参考下2024-05-05
这篇文章主要向大家推荐一个原生js实现淘宝购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
javascript实现TreeView 无刷新展开的实例代码
这篇文章介绍了javascript实现TreeView 无刷新展开的实例代码，有需要的朋友可以参考一下2013-07-07
各浏览器对document.getElementById等方法的实现差异解析
这篇文章主要是对各浏览器对document.getElementById等方法的实现差异进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍的是通过js简单实现交换Li的值,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了JavaScript中的异步能省掉await吗?一直以来，困扰我的一个问题是JavaScript中，能否实现不带await的异步。今天我终于把这个问题想通了然后分享给大家，希望对大家的学习过程有所帮助2021-12-12
最新评论