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 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
javascript中call()、apply()的区别
Mar 21 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 获取文件权限函数介绍
2013/07/11 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jQuery 1.0.2
2006/10/11 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue的全局提示框组件实例代码
2018/02/26 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
执行总经理岗位职责
2014/02/03 职场文书
党建目标管理责任书
2014/07/25 职场文书
2016公司年会通知范文
2015/04/25 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL