鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标
Posted 奋斗的少年WH
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head> 3 <style> 4 #oneDiv{ 5 position :absolute ; 6 left:200px; 7 top:100px; 8 width:300px; 9 border:1px solid 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="oneDiv"> 16 <p> 17 亚太经合组织领导人非正式会议（The APEC Economic Leaders\' Meeting），是亚太经合组织 最高级别的会议。会议就有关经济问题发表见解，交换看法，会议形成的领导人宣言是指导亚太经合组织各项工作的重要纲领性文件。首次领导人非正式会议于1993年11月在美国西雅图召开，此后每年召开一次，在各成员间轮流举行，由各成员领导人出席 18 </p> 19 <input type="button" id="but" onclick="clickMe(this);" value="修改"></input> 20 </div> 21 <div id="twoDiv" style="display:none;border:1px solid red;width:100px"> 22 <div>确认修改</div> 23 <div>取消修改</div> 24 </div> 25 </body> 26 <script> 27 function clickMe(obj){ 28 //alert(event.clientX+"____"+event.clientY); 29 //alert(event.clientY); 30 //正常情况下window是被隐藏了，只显示document.getElementById 即系统默认自带window. 31 /** 32 var twoDiv=window.document.getElementById("twoDiv"); 33 twoDiv.style.display=""; 34 //绝对定位 35 twoDiv.style.position="absolute"; 36 // 37 twoDiv.style.left=event.clientX+"px"; 38 twoDiv.style.top=event.clientY+"px"; 39 */ 40 var b=document.getElementById("but"); 41 var width=b.width; 42 alert(width); 43 } 44 </script> 45 </html>
<html> <head> <style> #oneDiv{ position :absolute ; left:200px; top:100px; width:300px; border:1px solid } </style> </head> <body> <div id="oneDiv"> <p> 亚太经合组织领导人非正式会议（The APEC Economic Leaders\' Meeting），是亚太经合组织 最高级别的会议。会议就有关经济问题发表见解，交换看法，会议形成的领导人宣言是指导亚太经合组织各项工作的重要纲领性文件。首次领导人非正式会议于1993年11月在美国西雅图召开，此后每年召开一次，在各成员间轮流举行，由各成员领导人出席 </p> <input type="button" id="but" onclick="clickMe(this);" value="修改"></input> </div> <div id="twoDiv" style="display:none;border:1px solid red;width:100px"> <div>确认修改</div> <div>取消修改</div> </div> </body> <script> function clickMe(obj){ //alert(event.clientX+"____"+event.clientY); //alert(event.clientY); //正常情况下window是被隐藏了，只显示document.getElementById 即系统默认自带window. /** var twoDiv=window.document.getElementById("twoDiv"); twoDiv.style.display=""; //绝对定位 twoDiv.style.position="absolute"; // twoDiv.style.left=event.clientX+"px"; twoDiv.style.top=event.clientY+"px"; */ var b=document.getElementById("but"); var width=b.width; alert(width); } </script> </html>
以上是关于鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标的主要内容，如果未能解决你的问题，请参考以下文章