javascript实现无缝上下滚动(转)
js实现上下无缝滚动的原理是这样的:
1、首先给容器设定高度或宽度,然后overflow:hidden;
2、容器高度设定后,内容超出则被隐藏。
3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理);
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。
代码如下:
- <divid="colee"style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
- <divid="colee1">
- <p>php</p>
- <p>java</p>
- <p>ruby</p>
- <p>python</p>
- <p>www.phpddt.com</p>
- </div>
- <divid="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
- functionMarquee1(){
- //当滚动至colee1与colee2交界时
- if(colee2.offsetTop-colee.scrollTop<=0){
- colee.scrollTop-=colee1.offsetHeight;//colee跳到最顶端
- }else{
- colee.scrollTop++
- }
- }
- varMyMar1=setInterval(Marquee1,speed)//设置定时器
- //鼠标移上时清除定时器达到滚动停止的目的
- colee.onmouseover=function(){clearInterval(MyMar1)}
- //鼠标移开时重设定时器
- colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
- </script>
javascript实现无缝上下滚动(转)的更多相关文章
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
随机推荐
- opencart 百度登录和百度钱包支付插件 响应式适应pc/mobile
OpenCart(http://www.opencart.com/,http://www.opencartchina.com/)是国外著名的开源电子商务系统, 优势在于前台界面的设计非常适合欧美购物者 ...
- hierarchyviewer偶然不能使用的解决方法
在DDMS的device中可以看到设备,并显示可以debug的状态,可以看到不显示进程的信息,但是hierarchyviewer也却不显示各个Window. 在控制台的打印信息如下: - hierar ...
- SEMAT[软件工程方法和理论 Software Engineering Method and Theory]
Agile software development Agile software development is a group of software development methods bas ...
- Core MVC
Core MVC 配置全局路由前缀 前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应 ...
- MySQL驱动阅读------Connection连接的建立,基于JDBC-----5.1.26
一般获取数据库连接的程序 Class.forName("com.mysql.jdbc.Driver"); final Connection connection = (Connec ...
- winform下载网页源码
public partial class Form1 : Form{public Form1(){InitializeComponent();} private void button1_Click( ...
- babun,windows shell
babun是windows上的一个第三方shell,在这个shell上面你可以使用几乎所有linux,unix上面的命令,他几乎可以取代windows的shell. babun的几个特点: 使用bab ...
- matlab提速技巧(自matlab帮助文件)
matlab提速技巧(自matlab帮助文件) 1.首先要学会用profiler.1.1. 打开profiler.To open the Profiler, select View -> Pro ...
- angularjs 资源集合
AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足. 源码托管在Github上,其通过使用指令(directives)结构来扩展HTML词汇 ...
- python中并行遍历:zip和map-转
http://blog.sina.com.cn/s/blog_70e50f090101lat2.html 1.并行遍历:zip和map 内置的zip函数可以让我们使用for循环来并行使用多个序列.在基 ...