none
js获取页面控件坐标 RRS feed

  • 问题

  • 问题描述:页面有一个div和image控件。最终结果是需要div的内容显示在image的右下角。我的想法是在页面加载时先获得image控件的坐标,然后根据这个坐标来设置div的坐标,达到最终需要的效果。但现在我无法通过js来得到image的坐标。请教各位image的坐标怎么得到?谢谢先。下面给出相关代码:
    <tr>
        <td align="center" valign="bottom">
            <img id="imgSubject" src="Images/hero_highjump_img.jpg" width="810px" style="height: 200px"/>
        </td>
    </tr>

    <div id="divScroll" style="z-index:1; position:absolute;">
            <table cellpadding="0px" cellspacing="0px" border="0">
                <tr>
                    <td>
                        <script language="javascript" type="text/javascript">
                            var marqueeContent=new Array(); //滚动主题
                            marqueeContent[0]='&nbsp;<img alt="" src="Images/gif-0306.gif" align="absmiddle" />&nbsp;<a href="thirdPage/otherNews.aspx" target="_blank" style="color: #17375e">企业质量信息化的建设之路新时代中国企业的必由之路</a><img alt="" src="Images/gif-0493.gif" align="baseline" />'
                            marqueeContent[1]='&nbsp;<img alt="" src="Images/gif-0306.gif" align="absmiddle" />&nbsp;<a href="thirdPage/otherNewsOne.aspx" target="_blank" style="color: #17375e">如何“又好又快”的进行企业质量信息系统的构建</a><img alt="" src="Images/gif-0493.gif" align="baseline" />';
                            var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
                            var marqueeId=0;
                            var marqueeDelay=5000;
                            var marqueeHeight=14;

                            function initMarquee()
                            {
                                var str=marqueeContent[0];
                                document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
                                marqueeId++;
                                marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
                            }

                            function startMarquee()
                            {
                                var str=marqueeContent[marqueeId];
                                marqueeId++;
                                if(marqueeId>=marqueeContent.length)
                                {
                                    marqueeId=0;
                                }
                                if(marqueeBox.childNodes.length==1)
                                {
                                    var nextLine=document.createElement('DIV');
                                    nextLine.innerHTML=str;
                                    marqueeBox.appendChild(nextLine);
                                }
                                else
                                {
                                    marqueeBox.childNodes[0].innerHTML=str;
                                    marqueeBox.appendChild(marqueeBox.childNodes[0]);
                                    marqueeBox.scrollTop=0;
                                }
                                clearInterval(marqueeInterval[1]);
                                marqueeInterval[1]=setInterval("scrollMarquee()",10);
                            }
                            
                            function scrollMarquee()
                            {
                                marqueeBox.scrollTop++;
                                if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight)
                                {
                                    clearInterval(marqueeInterval[1]);
                                }
                            }
                            initMarquee();
                        </script>
                    </td>
                </tr>
            </table>
        </div>


    zy
    2009年4月14日 6:26

答案

  • <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function get_Text() {
    					m = document.getElementById("mxh")
    					var w=0,h=0;
    					while(m.offsetParent)
    					{
    						w += m.offsetLeft;
    						h += m.offsetTop;
    						m = m.offsetParent;
    					}
    					alert(w)
            }
        </script>
    </head>
    <body>
    sdsdddddd<img src="http://www.google.com/help/hc/images/google_logo_sm.gif" id="mxh" />
        <input type="button" value="get" onclick="get_Text()"/>
    </body>
    </html>
    

    孟宪会
    • 已标记为答案 张烨 2009年4月14日 8:40
    2009年4月14日 8:26
    版主

全部回复

  • <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function get_Text() {
    					m = document.getElementById("mxh")
    					var w=0,h=0;
    					while(m.offsetParent)
    					{
    						w += m.offsetLeft;
    						h += m.offsetTop;
    						m = m.offsetParent;
    					}
    					alert(w)
            }
        </script>
    </head>
    <body>
    sdsdddddd<img src="http://www.google.com/help/hc/images/google_logo_sm.gif" id="mxh" />
        <input type="button" value="get" onclick="get_Text()"/>
    </body>
    </html>
    

    孟宪会
    • 已标记为答案 张烨 2009年4月14日 8:40
    2009年4月14日 8:26
    版主
  • 另外还可以使用css技巧来实现
    孟宪会
    2009年4月14日 8:34
    版主
  • To:孟宪会:非常感谢:)
    zy
    2009年4月14日 8:40