首页 > 代码库 > 鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标

鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标

2024-08-21 12:46:14   223人阅读

 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>
View Code

 

鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标


联系
我们