javascript实现无缝上下滚动特效


Posted in Javascript onDecember 16, 2015

本文实例讲解了javascript实现无缝上下滚动的代码,分享给大家供大家参考,具体内容如下

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

效果图如下:

javascript实现无缝上下滚动特效

代码如下:

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
JavaScript中的Document文档对象
Jan 16 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 #Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 #Javascript
Sublime Text 3常用插件及安装方法
Dec 16 #Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 #Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 #Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 #Javascript
javascript数组克隆简单实现方法
Dec 16 #Javascript
You might like
用PHP实现递归循环每一个目录
2010/08/08 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python回调函数用法实例分析
2015/05/09 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
公司司机岗位职责
2014/02/07 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
ktv好的活动方案
2014/08/17 职场文书
2014年医务科工作总结
2014/12/18 职场文书
遗嘱范文
2015/08/07 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript