js实现上下无缝滚动的原理是这样的:

1、首先给容器设定高度或宽度,然后overflow:hidden; 
2、容器高度设定后,内容超出则被隐藏。
3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理); 
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。

代码如下:

    1. <divid="colee"style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
    2. <divid="colee1">
    3. <p>php</p>
    4. <p>java</p>
    5. <p>ruby</p>
    6. <p>python</p>
    7. <p>www.phpddt.com</p>
    8. </div>
    9. <divid="colee2"></div>
    10. </div>
    11. <script>
    12. //速度设置
    13. var speed=1;
    14. var colee2=document.getElementById("colee2");
    15. var colee1=document.getElementById("colee1");
    16. var colee=document.getElementById("colee");
    17. colee2.innerHTML=colee1.innerHTML;//克隆colee1为colee2
    18. functionMarquee1(){
    19. //当滚动至colee1与colee2交界时
    20. if(colee2.offsetTop-colee.scrollTop<=0){
    21. colee.scrollTop-=colee1.offsetHeight;//colee跳到最顶端
    22. }else{
    23. colee.scrollTop++
    24. }
    25. }
    26. varMyMar1=setInterval(Marquee1,speed)//设置定时器
    27. //鼠标移上时清除定时器达到滚动停止的目的
    28. colee.onmouseover=function(){clearInterval(MyMar1)}
    29. //鼠标移开时重设定时器
    30. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
    31. </script>

javascript实现无缝上下滚动(转)的更多相关文章

  1. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  2. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  3. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  4. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  5. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  6. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  7. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  8. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

随机推荐

  1. 一个c++给程序打log的单例模式类

    开发过程中需要给程序打log. 所以照着网上写了个单例模式的log类 #ifndef MISCLOGWRITER_H_ #define MISCLOGWRITER_H_ #include <io ...

  2. WPF DataGrid

    前台代码 <DataGrid Name="gv_GetWork" AutoGenerateColumns="False" CanUserSortColum ...

  3. 关于一个简单面试题(。net)

    猫大叫一声,主人被惊醒,所有的小老鼠开始逃窜. 期初想到的是事件调用方法. 在猫叫的事件中调用一对方法就可以了. 但是,当事件很多的时候 难保大家写着写着就忘记了. 总不能有 10000个人的时候调用 ...

  4. Phonegap 3.0 拍照 出错的说明

    在官方3.0 提供的摄像机操作例子是不成功的,因为该例子没有说明摄像机操作需要添加Plugin. 添加插件方法(安装cordova3.0时必须使用官方命令行方式,通过nodejs安装,且装上了git) ...

  5. document.body.clientWidth vs document.documentElement.clientWidth

    http://blog.csdn.net/zb0567/article/details/7182391 mobile web javascript library http://www.gbin1.c ...

  6. 使用HttpServletRequestWrapper在filter修改request参数

    javax.servlet.ServletRequest中的 Map<String, String[]> parameterMap = request.getParameterMap(); ...

  7. Haskell 输入和输出

    我们已经说明了 Haskell 是一个纯粹函数式语言.虽说在命令式语言中我们习惯给电脑执行一连串指令,在函数式语言中我们是用定义东西的方式进行.在 Haskell 中,一个函数不能改变状态,像是改变一 ...

  8. JAVA中IO技术:BIO、NIO、AIO

    1.同步异步.阻塞非阻塞概念        同步和异步是针对应用程序和内核的交互而言的. 阻塞和非阻塞是针对于进程在访问数据的时候,根据IO操作的就绪状态来采取的不同方式,说白了是一种读取或者写入操作 ...

  9. 数据库的存储引擎和SQL语言

    数据库的存储引擎就是管理数据存储的东西,它完成下面的工作: 1)存储机制 2)索引方式 3)锁 4)等等 SQL语言:-----关系型数据库所使用的数据管理语言 1)数据定义语言(DDL):DROP. ...

  10. Unity3d 获取屏幕depth与normal

    Depth 获取Depth的几种方法,分别有不同效果 1. <span style="font-size:14px;">            float2 depth ...