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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
图解上海144收音机
2021/03/02 无线电
php实现ping
2006/10/09 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python中安装easy_install的方法
2018/11/18 Python
python psutil模块使用方法解析
2019/08/01 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
人力资源经理的岗位职责
2014/03/02 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
2015年酒店工作总结
2015/04/28 职场文书
小马王观后感
2015/06/11 职场文书
国家助学金受助感言
2015/08/01 职场文书