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. opencart 百度登录和百度钱包支付插件 响应式适应pc/mobile

    OpenCart(http://www.opencart.com/,http://www.opencartchina.com/)是国外著名的开源电子商务系统, 优势在于前台界面的设计非常适合欧美购物者 ...

  2. hierarchyviewer偶然不能使用的解决方法

    在DDMS的device中可以看到设备,并显示可以debug的状态,可以看到不显示进程的信息,但是hierarchyviewer也却不显示各个Window. 在控制台的打印信息如下: - hierar ...

  3. SEMAT[软件工程方法和理论 Software Engineering Method and Theory]

    Agile software development Agile software development is a group of software development methods bas ...

  4. Core MVC

    Core MVC 配置全局路由前缀 前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应 ...

  5. MySQL驱动阅读------Connection连接的建立,基于JDBC-----5.1.26

    一般获取数据库连接的程序 Class.forName("com.mysql.jdbc.Driver"); final Connection connection = (Connec ...

  6. winform下载网页源码

    public partial class Form1 : Form{public Form1(){InitializeComponent();} private void button1_Click( ...

  7. babun,windows shell

    babun是windows上的一个第三方shell,在这个shell上面你可以使用几乎所有linux,unix上面的命令,他几乎可以取代windows的shell. babun的几个特点: 使用bab ...

  8. matlab提速技巧(自matlab帮助文件)

    matlab提速技巧(自matlab帮助文件) 1.首先要学会用profiler.1.1. 打开profiler.To open the Profiler, select View -> Pro ...

  9. angularjs 资源集合

    AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足. 源码托管在Github上,其通过使用指令(directives)结构来扩展HTML词汇 ...

  10. python中并行遍历:zip和map-转

    http://blog.sina.com.cn/s/blog_70e50f090101lat2.html 1.并行遍历:zip和map 内置的zip函数可以让我们使用for循环来并行使用多个序列.在基 ...