1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. #mydiv1 {
  9. height: 30px;
  10. width: 300px;
  11. }
  12. -->
  13. </style>
  14. </head>
  15.  
  16. <body onload="beginmarquee()">
  17. <table width="" border="" cellspacing="" cellpadding="">
  18. <tr>
  19. <td width=""><div id="demo" style="overflow:hidden;width:200px; height:100px">
  20. <div id="demo1">
  21. <img src="1.jpg" width="" height="" />
  22. <img src="2.jpg" width="" height="" />
  23. <img src="3.jpg" width="" height="" />
  24. <img src="4.jpg" width="" height="" />
  25. <img src="5.jpg" width="" height="" />
  26. <img src="6.jpg" width="" height="" />
  27. </div>
  28. <div id="demo2"></div>
  29. </div></td>
  30. <td>&nbsp;</td>
  31. </tr>
  32. </table>
  33. <div id="mydiv1">数据显示</div>
  34. <script language="javascript">
  35. var speed=
  36. demo2.innerHTML=demo1.innerHTML
  37. mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'demo1的scrollTop'+demo1.scrollTop+'demo2的scrollTop'+demo2.scrollTop
  38.  
  39. function Marquee()
  40. {
  41. if(demo2.offsetTop-demo.scrollTop<=)
  42. demo.scrollTop-=demo1.offsetHeight
  43. else
  44. {
  45. demo.scrollTop++
  46. }
  47. 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
  48. }
  49.  
  50. var MyMar
  51. function beginmarquee()
  52. {
  53. MyMar=setInterval(Marquee,speed)
  54. }
  55. demo.onmouseover=function() {clearInterval(MyMar)}
  56. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  57. </script>
  58. </script>
  59. </body>
  60. </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就是实际的高度

  1. 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. 环境变量，env, set

    separate: win(;), linux(:) liunx 写 export PYTHONPATH=.:./lib:./libraryexport http_proxy=http://proxy ...

  2. python多个装饰器

    '''在装饰器中加上参数:1.实现在源代码中加上时间统计:函数timmer2.实现用户名认证功能:函数auth23.实现一次认证,刷新后自动登录功能,index函数已经认证并登录,在执行home函数时 ...

  3. SQLServer 链接服务器及同义词

    链接服务器 1. openrowse exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc ...

  4. python-字符、字符串、函数处理

    1.列表元祖字典集合 列表 list = ["a", "b", "c", "d"] 元祖 tup = (1, 2, 3, ...

  5. ES6中模块加载出现的问题

    1.如何在浏览器中import模块 在使用模块加载时不同浏览器有不同的行为 使用 import 加载模块时,需要把script标签的type属性改为module.此时Firefox浏览器支持impor ...

  6. javascript is ths best computer language

    alert('javascript is one of the best computer languages')

  7. Orcad Capture元件库介绍--Cadence Allegro

    绘制原理图和PCB,最好有自己的元件封装.元件库 ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C ...

  8. HDU - 6601 Keen On Everything But Triangle 主席树

    Keen On Everything But Triangle 感觉最近多校好多主席树的亚子,但是本人菜得很,还没学过主席树,看着队友写题就只能划水,\(WA\)了还不能帮忙\(debug\),所以深 ...

  9. Cent OS （二）常用的命令介绍

    1. 常用的Linux命令   序号 命令 对应英文 作用 01 ls list 查看当前文件夹下的内容 02 pwd print work directory 查看当前所在的文件夹 03 cd [目 ...

  10. 2018-2019-2 网络对抗技术 20165206 Exp 9 Web安全基础

    - 2018-2019-2 网络对抗技术 20165206 Exp 9 Web安全基础 - 实验任务 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS,C ...