zoukankan      html  css  js  c++  java
  • 图片拖拽面向对象写法-1

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>拖拽之面向对象</title>
    <style>
    #box1{ 100px;height: 100px;background-color: #0A246A;
    position: absolute;}
    </style>
    <script>
    //第二步:全局变量
    var oDiv=null;
    var disX=0;
    var disY=0;
    window.onload=function(){
    oDiv=document.getElementById("box1");
    oDiv.onmousedown=fnDown;
    }
    //第一步:拎嵌套函数
    function fnDown(ev){
    var oEvent=ev||event;
    var disX = oEvent.clientX-oDiv.offsetLeft;
    var disY = oEvent.clientY-oDiv.offsetTop;
    document.onmousemove=fnMove
    document.onmouseup=fnUp
    }
    function fnMove(ev){
    var oEvent=ev||event;
    oDiv.style.left=oEvent.clientX-disX+'px';
    oDiv.style.top=oEvent.clientY-disY+'px';
    }
    function fnUp(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    </script>
    </head>
    <body>
    <div id="box1"></div>
    </body>
    </html>

  • 相关阅读:
    常见模块和包
    二分查找算法
    常见内置函数
    Django总目录
    nginx配置站点
    Arduino语言
    Python连接Arduino的方法
    机器人学习
    Redis
    arduino总目录
  • 原文地址:https://www.cnblogs.com/mylove0/p/7464933.html
Copyright © 2011-2022 走看看