小白关于走马灯幻灯片的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 采用先进的机器学习和程序分析技 ...
随机推荐
- delphi 打开和关闭外部exe
一.打开外部exe 1.use文件-SHELLAPI 2.ShellExecute(handle,'open','E:\test.exe','-s','',SW_SHOWNORMAL); 二.关闭外部 ...
- STM32F103系列命名规则
对于STM32F103xxyy系列:第一个x代表引脚数:T-36pin,C-48pin,R-64pin,V-100pin,Z-144pin:第二个x代表Flash容量:6-32K,8-64K,B-12 ...
- nyoj 600:花儿朵朵（树状数组+坐标离散化）
http://acm.nyist.net/JudgeOnline/problem.php?pid=600 只附代码好了 #include<bits/stdc++.h> using name ...
- ubuntu下安装pyaudio
首先安装依赖库,不安装依赖库会安装失败: sudo apt-get install libasound-dev portaudio19-dev libportaudio2 libportaudiocp ...
- JS中的立即执行函数
JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...
- JS中的this指针
1.JS中this指针指向 JS中函数的 this 并不遵守词法作用域规则(即作用域由声明时所处的位置决定),而是取决于函数的调用方式 影响 this 指针的因素有以下: 方法是否由某个对象调用,比如 ...
- 两个图层一上一下div view
<view class="main"> <view class="user-info"> </view> <view ...
- PHP 常用自定义函数
模拟 POST.GET 请求 /** * 模拟post进行url请求 * @param string $url * @param string $param */ protected function ...
- 使用Docker快速部署Gitlab
使用Docker部署Gitlab 1. 下载gitlab镜像 docker pull gitlab/gitlab-ce 2. 运行gitlab实例 GITLAB_HOME=`pwd`/data/git ...
- sqlserver存储过程（转）
一.不含参数的存储过程 1.没有返回值: 创建语句: CREATE PROCEDURE dbo.ProTest AS DECLARE @test int SET @test = 1 ...