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 相关文章推荐
JScript的条件编译
May 29 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
laravel model 两表联查示例
2019/10/24 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
项目实践之javascript技巧
2007/12/06 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python 搜索大文件的实例代码
2019/07/08 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
协议书模板
2014/04/23 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
MySQL数据库 安全管理
2022/05/06 MySQL