<!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>&nbsp;</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代码分析的更多相关文章

  1. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  2. 横纵方向走马灯滚动，纯javascript代码

    <body onload="beginmarquee()"> <table width="1024" border="0" ...

  3. 分析JavaScript代码应该放在HTML代码哪个位置比较好

    本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...

  4. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

  5. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  6. 完整全面的Java资源库（包括构建、操作、代码分析、编译器、数据库、社区等等）

    构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化 ...

  7. javaScript代码执行顺序

    javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...

  8. Chrome开发者工具之JavaScript内存分析

    阅读目录 对象大小(Object sizes) 对象的占用总内存树 支配对象(Dominators) V8介绍 Chrome 任务管理器 通过DevTools Timeline来定位内存问题 内存回收 ...

  9. JS Nice – JavaScript 代码美化和格式化工具

    JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...

随机推荐

  1. Code Festival 2017 Qual B E Popping Balls

    传送门 神仙计数! 我的计数真的好差啊= = 不过这个题真的神仙 看了题解把整个过程在草稿纸上重写了一遍才想明白= =(一张草稿纸就没有了!!!) 计数的关键就是在于 枚举的有效性和独立性[不能重复计 ...

  2. 7.搭建hyperledger fabric环境及启动——2019年12月12日

    2019年12月12日13:05:16 声明:从网络中学习整理实践而来. 1.介绍fabric Fabric 是一个面向企业应用的区块链框架,基于 Fabric 的开发可以粗略分为几个层面: 1. 参 ...

  3. Win7 ODBC驱动 Excel (转)

    “控制面板-管理工具-数据源(ODBC)”,打开“ODBC数据源管理器”窗口,然后“添加”,打开“创建新数据源”的窗口,最后选择Microsoft Access Driver(*.mdb)选项,往后等 ...

  4. JavaSE---JDK提供的命令行工具---javap

    1.javap 1.1 javap是JDK自带的反解析工具: 1.2 作用:就是根据class字节码文件,反解析出    当前类   对应的code区(汇编指令).本地变量表.异常表和代码行偏移量映射 ...

  5. 操作数据库结构Sql语句

    新建表: create table [表名] ( ,) PRIMARY KEY , ) default '默认值' null , [字段2] ntext null , [字段3] datetime, ...

  6. 【Elasticsearch】清空指定index/type下的数据

    1.postman请求接口 http://ip:端口/index/type/_delete_by_query?conflicts=proceed body为: { "query": ...

  7. Oracle数据库之触发器(二)

    DML触发器是指在进行insert.update或delete操作时触发的程序体.如果你想在用户对数据进行操作时,记录或限制其操作,就可以用DML触发器.举例来说,我想统计我的网站用户的注册.注销或者 ...

  8. BUUCTF | [CISCN2019 华北赛区 Day2 Web1]Hack World

    id=0 id=1 id=2 id=3 发现结果不一样,尝试 : ">4","=4","<4" : 在自己的环境下验证一下: 爆 ...

  9. java配置和tomcat安装

    原文: https://www.cnblogs.com/lwjboke/p/7089126.html 下载: jdk历史版本 下载地址: http://www.oracle.com/technetwo ...

  10. 20175120彭宇辰 《Java程序设计》第十周学习总结

    教材内容总结 十二章 Java多线程机制 一.进程与线程.操作系统与进程 -线程不是进程,是比进程更小的执行单位.但与进程不同的是,线程的中断和恢复可以更加节省系统的开销. -线程可以共享进程中的某些 ...