图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】
信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo的scrollTop或者scrollLeft达到滚动的目的,当demo1与demo2的交界处滚动至demo顶端时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。
代码如下:
<DIV id=demo style="BACKGROUND: #214984; OVERFLOW: hidden; WIDTH: 158px; COLOR: #ffffff; HEIGHT: 598px"> <!--demo的高度需要小于等于demo1,否则不能循环。-->
<DIV id=demo1><!-- 定义图片 -->
<IMG height=130 src="表单网页_files/F200602161743593194929892.jpg" width=150 border=0>
<IMG height=157 src="data:images/0038.jpg" width=158>
<IMG height=156 src="data:images/NewsMedia_176140.jpg" width=154>
<IMG height=118 src="../P922118900.jpg" width=155 border=0>
<IMG height=118 src="../P922118900.jpg" width=155 border=0>
</DIV>
<DIV id=demo2>
<P> </P></DIV></DIV>
<SCRIPT type="text/javascript">
var speed=30; //图片滚动速度
demo2.innerHTML=demo1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当demo1与demo2的交界处滚动至demo顶端时
demo.scrollTop-=demo1.offsetHeight; //demo跳回到原始顶端位置
else{
demo.scrollTop++; //demo向上滚动一个像素
}
}
var MyMar=setInterval(Marquee,speed); //设置定时器
demo.onmouseover=function() {clearInterval(MyMar)}; //鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器</SCRIPT>
仔细研究代码里offsetTop、scrollTop、offsetHeight,得出这样的结论:
offsetTop:当前对象到其上级层顶部的距离。
scrollTop:对象顶端滚动出显示范围的值,下图上面虚线框里就是Demo向上滚动时隐藏的部分。
offsetHeight:当前对象的高度值。
类似的offsetLeft、scrollLeft、offsetWidth含义如下:
offsetLeft:当前对象到其上级层左部的距离。
scrollLeft:对象左端滚动出显示范围距离的值。
offsetWidth:当前对象的宽度值。
图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】的更多相关文章
- 开胃小菜——impress.js代码详解
README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- JAVA类与类之间的全部关系简述+代码详解
本文转自: https://blog.csdn.net/wq6ylg08/article/details/81092056类和类之间关系包括了 is a,has a, use a三种关系(1)is a ...
- 基础 | batchnorm原理及代码详解
https://blog.csdn.net/qq_25737169/article/details/79048516 https://www.cnblogs.com/bonelee/p/8528722 ...
- DeepLearning tutorial(3)MLP多层感知机原理简介+代码详解
本文介绍多层感知机算法,特别是详细解读其代码实现,基于python theano,代码来自:Multilayer Perceptron,如果你想详细了解多层感知机算法,可以参考:UFLDL教程,或者参 ...
- BM算法 Boyer-Moore高质量实现代码详解与算法详解
Boyer-Moore高质量实现代码详解与算法详解 鉴于我见到对算法本身分析非常透彻的文章以及实现的非常精巧的文章,所以就转载了,本文的贡献在于将两者结合起来,方便大家了解代码实现! 算法详解转自:h ...
- ASP.NET MVC 5 学习教程:生成的代码详解
原文 ASP.NET MVC 5 学习教程:生成的代码详解 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...
- Github-karpathy/char-rnn代码详解
Github-karpathy/char-rnn代码详解 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2016-1-10 ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
随机推荐
- Touch Handling in Cocos2D 3.x(四)
创建触摸生命周期 让我们改善我们的应用程序.如果玩家可以触摸屏幕并且拖放英雄到指定位置不是更好吗? 为了完成这个功能我们必须使用Cocos2d 3.0提供的所有的触摸事件: touchBegan:在用 ...
- 四大组件之 BroadcastReceiver小结
总结提高,与君共勉 1. BroadcastReceiver是什么? BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来接收来自系统和应用中的广播. ...
- 文件I/O实践(3) --文件共享与fcntl
文件共享 一个进程打开了两个文件 文件表条目(file-table-entry): 1.文件状态标志(file-status-flags): 读/写/追加/同步/非阻塞等; 2.当前文件偏移量 3.v ...
- Android ViewManger解析 从ViewRoot 源码分析invalidate
转载请标明出处:http://blog.csdn.net/sk719887916/article/details/48443429,作者:skay 通过学习了AndroidUI之绘图机基础知道 ...
- 《java入门第一季》之面向对象面试题(this和super的区别)
this和super的区别? 分别是什么呢? this代表本类对象的引用. super代表父类存储空间的标识(可以理解为父类引用,可以操作父类的成员) 怎么用呢? A:调用成员变量 this.成员变量 ...
- 《java入门第一季》之面向对象
之前的代码描述都是基于面向过程的,今天开始正式进入面向对象的世界.什么是对象?首先要区分类和对象的概念-- 现实世界中是如何描述一个事物的? 举例:学生 姓名,年龄,性别... 学习,吃饭,睡觉 属性 ...
- 安装nodejs中遇到的问题
make clean 出现时间不对的问题的时候,主要是系统时间设置错误. 用date -s 来分别设置日期和时间 用clock -w来写入CMS 安装g++ yum -y install gcc-c+ ...
- SpriteBuilder代码中弱引用(weak)需要注意的地方
比如在GameScene类中有一个弹出菜单层实例的引用,我们有: @implementation GameScene{ //other ivars __weak GameMenuLayer *_pop ...
- OpenCV——素描
具体的算法原理可以参考: PS滤镜,素描算法 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_ ...
- 基于SVMLight的文本分类
支持向量机(Support Vector Machine)是Cortes和Vapnik于1995年首先提出的,它在解决小样本 .非线性及高维模式识别 中表现出许多特有的优势,并能够推广应用到函数拟合等 ...