小白关于走马灯幻灯片的javascript代码分析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#mydiv1 {
height: 30px;
width: 300px;
}
-->
</style>
</head> <body onload="beginmarquee()">
<table width="" border="" cellspacing="" cellpadding="">
<tr>
<td width=""><div id="demo" style="overflow:hidden;width:200px; height:100px">
<div id="demo1">
<img src="1.jpg" width="" height="" />
<img src="2.jpg" width="" height="" />
<img src="3.jpg" width="" height="" />
<img src="4.jpg" width="" height="" />
<img src="5.jpg" width="" height="" />
<img src="6.jpg" width="" height="" />
</div>
<div id="demo2"></div>
</div></td>
<td> </td>
</tr>
</table>
<div id="mydiv1">数据显示</div>
<script language="javascript">
var speed=
demo2.innerHTML=demo1.innerHTML
mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'demo1的scrollTop'+demo1.scrollTop+'demo2的scrollTop'+demo2.scrollTop function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=)
demo.scrollTop-=demo1.offsetHeight
else
{
demo.scrollTop++
}
mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'<br>demo1的scrollTop'+demo1.scrollTop+'<br>demo2的scrollTop'+demo2.scrollTop+'<br><br>demo的offsetTop'+demo.offsetTop+'<br>demo1的offsetTop'+demo1.offsetTop+'<br>demo2的offsetTop'+demo2.offsetTop+'<br><br>demo的offsetHeight'+demo.offsetHeight+'<br>demo1的offsetHeight'+demo1.offsetHeight+'<br>demo2的offsetHeight'+demo2.offsetHeight
} var MyMar
function beginmarquee()
{
MyMar=setInterval(Marquee,speed)
}
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</script>
</body>
</html>
demo的scrollTop从0到1200变化
demo1的scrollTop0
demo2的scrollTop0
demo的offsetTop0
demo1的offsetTop0
demo2的offsetTop1200
demo的offsetHeight100
demo1的offsetHeight1200
demo2的offsetHeight1200
scrollTop相当于只对含有嵌套的子元素，带overflow的滚动条的对象有效，是父级的一个属性。只的是子对象溢出父对象上边界的距离。（不用从滚动条理解，从子对象对父对象位置更准确）
offsetTop 这个比较难理解，是对于子对象的概念，如果按字面上理解 指 obj 距离上方或上层控件的位置 这个不是特别准确，因为在幻灯滚动过程中，其实 offsetTop是没有变的。不如说初始时，该对象距离整体的顶端的距离。或者说子对象距离子对象空间整体的顶端的距离。
offsetHeight就是实际的高度
demo.scrollTop++ 和overflow:hidden 构成了滚动
小白关于走马灯幻灯片的javascript代码分析的更多相关文章
- JQuery html API支持解析执行Javascript脚本功能实现-代码分析
JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...
- 横纵方向走马灯滚动，纯javascript代码
<body onload="beginmarquee()"> <table width="1024" border="0" ...
- 分析JavaScript代码应该放在HTML代码哪个位置比较好
本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...
- 一些有用的javascript实例分析(三)
原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...
- 如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...
- 完整全面的Java资源库（包括构建、操作、代码分析、编译器、数据库、社区等等）
构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化 ...
- javaScript代码执行顺序
javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...
- Chrome开发者工具之JavaScript内存分析
阅读目录 对象大小(Object sizes) 对象的占用总内存树 支配对象(Dominators) V8介绍 Chrome 任务管理器 通过DevTools Timeline来定位内存问题 内存回收 ...
- JS Nice – JavaScript 代码美化和格式化工具
JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...
随机推荐
- python基础：11.列表对象属性排序
def __lt__ def __gt__ def __repr__
- vmware版本选择
vmware哪个版本好用 2014-03-10 22:59一枚小白3 | 分类:常见软件 | 浏览6743次 准备装ghost xp,想问下哪个版本更适合?或者现在哪个版本更稳定,求不要复制,求大神解 ...
- python之chardet用来检测字符串编码的
import chardet a=b'\xe4\xbd\xa0\xe5\xa5\xbd\xef\xbc\x8c\xe4\xb8\x96\xe7\x95\x8c\xe3\x80\x82'print(ch ...
- HTTP协议-get请求与post请求的区别
区别: 参数:get通过url进行传递:post放在request body中 长度:get请求在url的长度是有限制的:而post没有(其实这个限制是来自浏览器和web服务器对url的限制,并不是h ...
- PLSQL连接oracle12c
一.本人以前都是使用oracle10g客户端,PLSQL连接oracle12c时报错 确认配置完全没问题,纠结了不少时间.后来查的是oracle客户端太老了,版本11.2.0.2.0以上即可 二.下载 ...
- 英语单词cylindern
cylindern 来源——fdisk -l [root@centos65 ~]# fdisk -l Disk /dev/sda: 214.7 GB, 214748364800 bytes 255 h ...
- mybatis源码分析之05一级缓存
首先需要明白,mybatis的一级缓存就是指SqlSession缓存,Map缓存! 通过前面的源码分析知道mybatis框架默认使用的是DefaultSqlSession,它是由DefaultSqlS ...
- python之字符串切分
在工作中,经常遇到字符串切分,尤其是操作linux命令,返回一段文本,如下面这种格式 Filesystem Size Used Avail Use% Mounted on /dev/vda1 40G ...
- Java Web学习总结（5）HttpServletRequest
一,HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
- Spring通知类型及使用ProxyFactoryBean创建AOP代理
Spring 通知类型 通过前面的学习可以知道,通知(Advice)其实就是对目标切入点进行增强的内容,Spring AOP 为通知(Advice)提供了 org.aopalliance.aop.Ad ...