收藏
|
最近工作比较忙，没有时间自己研究了，希望能够对所用的方法或属性做点解释，并且有一段源码，最好还要考虑一下有哪些会引起div偏离td1的情况，比如改变了浏览器窗口的大小…… 谢谢各位！：） |
官方推荐 |
|
关注,有时间分析分析
|
|
在csdn最热闹的时候进行的改版把程序员们都改跑了，现在这里好冷清呀！
要想重现往日的繁华不知还要花多长时间：（ |
|
<a href='javascript:moveDiv()'>Move it! :)</a>
<table border=1 width=300 height=300> <tr><td id=td1>1234567<br>1234567</td><td>1234567<br>1234567</td></tr> <tr><td>1234567<br>1234567</td><td>1234567<br>1234567</td></tr> </table> <div id=div1 style='background:#009000; border:1px solid; position:absolute; left:100px; top:100px; width:100px; height:100px;'>div div</div> <script language=javascript> function moveDiv() { with (document.all) { var nLeft = 0; var nTop = 0; for (var el = td1; el.tagName != "BODY"; el = el.offsetParent) { nLeft += el.offsetLeft; nTop += el.offsetTop; } div1.style.pixelLeft = nLeft; div1.style.pixelTop = nTop; div1.style.pixelWidth = td1.offsetWidth; div1.style.pixelHeight = td1.offsetHeight; } } </script> |
|
re:huntout
如果table设置为width=100%，那么改变窗口大小时div的位置会发生偏移 是否还有其它的情况导致div的位置发生偏移? 属性里有好多种left,如pixelleft,left,offsetleft，这些的区别是什么？ |
|
Huntout不愧是高手,我利用他的代码作了一点修改,比较有趣,放出来大家一起欣赏
------------------------------------------------------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>真酷</title> </head> <body> <br><br><br><br> <center> <table border=1 width=337 height=232> <tr> <td id=td1 onclick="moveDiv(td1)" width="111" align="center" height="77"><b><font size="6">1</font></b></td> <td id=td2 onclick="moveDiv(td2)" width="111" align="center" height="77"><b><font size="6">2</font></b></td> <td id=td3 onclick="moveDiv(td3)" width="111" align="center" height="77"><b><font size="6">3</font></b></td> </tr> <tr> <td id=td4 onclick="moveDiv(td4)" width="111" align="center" height="77"><b><font size="6">4</font></b></td> <td id=td5 onclick="moveDiv(td5)" width="111" align="center" height="77"><b><font size="6">5</font></b></td> <td id=td6 onclick="moveDiv(td6)" width="111" align="center" height="77"><b><font size="6">6</font></b></td> </tr> <tr> <td id=td7 onclick="moveDiv(td7)" width="111" align="center" height="78"><b><font size="6">7</font></b></td> <td id=td8 onclick="moveDiv(td8)" width="111" align="center" height="78"><b><font size="6">8</font></b></td> <td id=td9 onclick="moveDiv(td9)" width="111" align="center" height="78"><b><font size="6">9</font></b></td> </tr> </table> <div id=div1 style='background-color: #009000; background-repeat: repeat; background-attachment: scroll; position: absolute; left: 100; top: 100; width: 100; height: 100; border-style: solid; border-width: 1px; background-position: 0%'> <p align="center"><b><font size="7" color="#FF00FF">真酷</font></b></div> </center> <script language=javascript> function moveDiv(itd) { with (document.all) { var nLeft = 0; var nTop = 0; for (var el = itd; el.tagName != "BODY"; el = el.offsetParent) { nLeft += el.offsetLeft; nTop += el.offsetTop; } div1.style.pixelLeft = nLeft; div1.style.pixelTop = nTop; div1.style.pixelWidth = itd.offsetWidth; div1.style.pixelHeight = itd.offsetHeight; } } moveDiv(td1) </script> </body> </html> ------------------------------------------------------------------------------- |
|
re:hblinux
呵呵……一改变窗口的大小，div就跑到一边去了 另外在每个td中都写上moveDiv(td?)太笨了吧：）在table的click事件中处理一下，得到当前点击的单元格，一起处理多好呀！ |
|
To:Tyro
我也不是象Huntout及Tyro兄这样属于顶尖高手级的人,做这个当然是糊里糊涂,要多向你们学习,也请教Tyro兄如何改进??? |
|
呵呵,我都没有看见这个论题, 看来改版让我损失好多分耶! 呵呵.
处理一个body的onresize消息就可以了,用一个变量记下当前的TD名.每次resize时调用moveDiv(记录的TD名) 呵呵,试试看. |
|
re:hblinux
在table的click事件中添加下面的代码，可以获得点击的单元格，然后处理moveDiv: Dim objCell Set objCell = window.event.srcElement Do While objCell.tagName <> "TD" Set objCell = objCell.parentElement Loop moveDiv(objCell) |
|
谢谢Tyro兄,下面我还有一些比较麻烦的问题,不知能不能帮忙看看.
http://210.77.155.27/expert/TopicView.asp?id=24392 |
|
Tyro:
想知道offsetLeft... 在MSDN Library - July 2000 中搜尋主題 Measuring Element Dimension and Location |
|
re:huntout
我用interdev，怎么写完style后显示的属性中没有pixelleft呀？ offsetLeft的意思我知道一些，但是style.left是什么意思呀？ |
|
63795关注！
|
本帖子已过去太久远了，不再提供回复功能。
关闭