图片滚动(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 ...
随机推荐
- Zookeeper实现数据的发布和订阅
使用场景 当一个对象的改变,需要通知其他对象而且不知道要通知多少个对象,可以使用发布订阅模式 .在分布式中的应用有配置管理(Configuration Management) .集群管理 ...
- Leetcode_172_Factorial Trailing Zeroes
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42417535 Given an integer n, re ...
- 应届生求职:IT博客真能当技术型职位的求职利器?
正值一年一度的大学毕业季,面对严峻的就业形势,700万大学毕业生,不到三成的签约率,可真是苦煞了没有工作经验,也没有项目经验的应届毕业生们.拿什么打动面试官?成绩?特长?社会实践?如果这些都不能让阅读 ...
- JavaScript进阶(六)用JavaScript读取和保存文件
用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...
- Android中让多个线程顺序执行探究
线程调度是指按照特定机制为多个线程分配CPU的使用权. 有两种调度模型:分时调度模型和抢占式调度模型. 分时调度模型:是指让所有的线程轮流获得cpu的使用权,并且平均分配每个线程占用的CPU的时间片. ...
- android采用SurfaceView实现文字滚动效果
前言 为了实现文字的滚动效果,之前也重写了TextView效果都不太好,后来对SurfaceView进行完善. 声明 欢迎转载,但请保留文章原始出处:) 小崔博客:http://blog.c ...
- Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
- Android NDK开发三:java和C\C++交互
转自:http://www.cnblogs.com/shangdahao/archive/2013/05/02/3053971.html 1.定义native方法并加载动态链接库: public cl ...
- 网站开发进阶(十一)如何将一个jsp页面嵌套在另一个页面中
如何将一个jsp页面嵌套在另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...
- 基于阻塞队列的生产者消费者C#并发设计
这是从上文的<<图文并茂的生产者消费者应用实例demo>>整理总结出来的,具体就不说了,直接给出代码,注释我已经加了,原来的code请看<<.Net中的并行编程-7 ...