实现div跟随鼠标移动、点击、拖动而产生的变化

怼烎@ 2022-05-26 13:47 164阅读 0赞

代码一：实现鼠标能够拖动div

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="rec" style="position:absolute;left: 100px;top: 100px; width: 50px;height: 50px;background: red;"></div>
        </body>
        <script type="text/javascript">
            //获取div元素
        var rec = document.getElementById("rec")
        var down = false;
        var dx = 0;
        var dy = 0;
        var sx = 0;
        var sy = 0;
        document.onmousemove = function(e){
            if (down) {
                var ev = e || event;
                console.log(ev.clientY)
                rec.style.top = ev.clientY - (dy - sy) + 'px';
                rec.style.left = ev.clientX - (dx - sx) + 'px';
            }
        }
        rec.onmousedown = function(){
            dx = event.clientX;
            dy = event.clientY;
            sx = parseInt(rec.style.left);
            sy = parseInt(rec.style.top);
            if (!down) {
                down  = true;
            }
        }
        document.onmouseup = function(){
            if (down) {
                down = false;
            }
        }
        </script>
    </html>

代码二:实现跟随鼠标的移动或者点击而移动

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>移动</title>
    <script type="text/javascript">
        function move(keynum) {
            //获取屏幕宽度
            var w=screen.availWidth;
            //获取屏幕高度
            var h=screen.availHeight
            var d = document.getElementById("dv");
            //创建随机数，也就是我们的移动速度
            var speed=Math.floor(Math.random()*100);
    
            switch (keynum) {
                case 65://a--向左移动
                    if(d.offsetLeft<5){
                        d.style.left=w/2+"px";
                    }else{
                        d.style.left = d.offsetLeft - speed + "px";             
                    }
                break;
                case 68://d---右移动
                    if(d.offsetLeft>screen.w-speed){
                        d.style.left=w/2+"px";
                    }else{
                        d.style.left = d.offsetLeft + speed + "px";
                    }
                break;
                case 87://w---向上移动
                    if(d.offsetTop<speed){
                        d.style.top=h/2+"px";
                    }else{
                        d.style.top = d.offsetTop - speed + "px";
                    }
                break;
                case 83://s---向下移动
                    if(d.offsetTop>h-speed){
                        d.style.top=h/2+"px";
                    }else{
                        d.style.top = d.offsetTop + speed + "px";
                    }
                break;
            }
        }
        function keyChange(e){
            var keynum;
            if (window.event) // IE
            {
                keynum = e.keyCode
            } else if (e.which) // Netscape/Firefox/Opera
            {
                keynum = e.which
            }
            move(keynum);
        }
        //随着鼠标一起动
        document.οnmοusemοve=function showxy(e) {
            if(!e){
                e = window.event;           
            }
            var d = document.getElementById("dv");
            d.style.left=e.clientX+"px";
            d.style.top=e.clientY+"px";
            //alert(e.clientX+","+e.clientY);
        } 
        //点击鼠标移动
        /* document.οnmοusedοwn=function showxy(e) {
    
            var d = document.getElementById("dv");
            d.style.left=e.clientX+"px";
            d.style.top=e.clientY+"px";
        }*/
    </script>
    </head>
    <body οnkeydοwn="keyChange(event)">
        <div style="position: absolute; left: 100px; top: 100px;" id="dv">
            <img src="ball.png" width="50px" height="50px" />
        </div>
    </body>
    </html>

# js div控制器 鼠标拖动控制点 实现旋转、缩放、移动 #

<!DOCTYPE HTML>
    <html>
     
    <head>
        <title>Page Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            .wrap{
                    margin: 0 auto;
                    width:1000px;
                    height:1000px;
                    border:1px solid gray;
                }
                .wrap>div{
                    float:left;
                    }
                    .wrap>#p{
                        width:80%;
                        height:1000px; 
                        position:relative;
                        overflow:auto;
                        border:1px solid gray;
                    }
                    div.d{
                        width:19%;
                        height:1000px;
                         
                    }
        #dd{
        width:100px;
        height:100px;
        left:300px;
        top:300px;
        position:absolute;
        background-color:#c81623;
        }  
        </style>
        <script>
            οnlοad=function(){
                    var div=document.getElementById("dd");
                    var sf=document.getElementById("sf");
                    var ydx=document.getElementById("ydx");
                    var ydy=document.getElementById("ydy");
                    var p=document.getElementById("p");
                    sf.value=parseFloat(getStyle(div,"width"))*100/500;
                    ydx.value=parseFloat(getStyle(div,"left"))*100/parseFloat(getStyle(p,"width"));
                    ydy.value=parseFloat(getStyle(div,"top"))*100/parseFloat(getStyle(p,"height"));
            }
            var rotate=function(obj){
                var div=document.getElementById("dd");
                div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + obj.value*360*0.01 + 'deg)'; 
            } 
            var scale=function(obj,w){
                var div=document.getElementById("dd");
                var h=parseFloat(getStyle(div,"height"));
                var ww=parseFloat(getStyle(div,"width"));
                div.style.height=div.style.width=w*0.01*obj.value +"px";
                var lef=parseFloat(getStyle(div,"left"));
                var tp = parseFloat(getStyle(div,"top"));
                div.style.left=lef-(parseFloat(div.style.width)-ww)/2+"px";
                div.style.top=tp-(parseFloat(div.style.height)-h)/2+"px";
            }
             
            var movex=function(obj,w){
                    var div=document.getElementById("dd");
                    var p=document.getElementById("p");
                    div.style.left=obj.value*0.01*(parseFloat(getStyle(p,"width"))-parseFloat(getStyle(div,"width")))+"px";
            }
             
            var movey=function(obj,w){
                    var div=document.getElementById("dd");
                    var p=document.getElementById("p");
                    div.style.top=obj.value*0.01*(parseFloat(getStyle(p,"height"))-parseFloat(getStyle(div,"height")))+"px";
            }
             
            var getStyle=function(obj,attr){
                        if(obj.currentStyle){
                            return obj.currentStyle[attr];
                        }else if(window.getComputedStyle){
                            var styleVal = window.getComputedStyle(obj, null)[attr] 
                            ? window.getComputedStyle(obj, null)[attr] :
                          window.getComputedStyle(obj, null).getPropertyValue(attr);
                          return styleVal;
                        }
                    }
        </script>
    </head>
     
    <body>
     <div class="wrap">
       <div id="p">
           <div id="dd"></div>   
       </div>
       <div class="d">
           旋转:
          <input type="range" id="xz" max=100 min=0 value=0 οninput="rotate(this)"  /> 
          缩放:
          <input type="range" id="sf" max=100 min=0 value=0 οninput="scale(this,500)" />
          移动X:
          <input type="range" id="ydx" max=100 min=0 value=0 οninput="movex(this)" />   
          移动Y:
          <input type="range" id="ydy" max=100 min=0 value=0 οninput="movey(this)"/> 
       </div>   
     </div>
    </body>
     
    </html>