zoukankan      html  css  js  c++  java
  • 鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标

     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;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;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
  • 相关阅读:
    2020软件工程作业04(2.0)
    2020软件工程作业03
    软件工程作业02
    2020软件工程作业02
    2020软件工程作业01
    2020软件工程个人作业06——软件工程实践总结作业
    2020软件工程作业05
    2020软件工程作业00——问题清单
    2020软件工程作业04
    2020软件工程作业02
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/6074489.html
Copyright © 2011-2022 走看看