zoukankan      html  css  js  c++  java
  • Div跟随鼠标移动

    <meta http-equiv="Content-Language" content="zh-cn" />
    <title>事件对象-Div跟鼠标移动</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    *{margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';}
    .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block;}
    * html .clearfix{height:1%}
    .clearfix{display:black;}
    #box{100px;height:100px;background:red;position:absolute;}
    </style>
    </head>
    <body>
    <div id='box'></div>
    <script type="text/javascript">
    window.onload=function(){
     document.onmousemove =function(ev){
        var oDiv=document.getElementById('box');
        var Event=ev||event;
        var pos = getPos(Event);
        oDiv.style.left = pos.x+'px';
        oDiv.style.top = pos.y+'px';    
     } 
     function getPos(ev){
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
        return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollLeft};    
     };
    }
    </script>
    </body>
    </html>

    鼠标事件:
    clientX 是可视区的横坐标
    clientY 是可视区的纵坐标
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    document.documentElement.clinetWidth 可视区的宽
    document.documentElement.clinetHeight 可视区的高

  • 相关阅读:
    MYSQL 注射精华
    MySQL数据库安全配置
    linux命令
    python异常处理、反射、socket
    random、面向对象编程
    序列化、常用模块以及面向对象基础
    python 装饰器、递归原理、模块导入方式
    python递归、collections系列以及文件操作进阶
    python基础
    python简介
  • 原文地址:https://www.cnblogs.com/xiaoxiaosha/p/3657920.html
Copyright © 2011-2022 走看看