运动函数 | 易学教程

拖拽

鼠标在元素中按下，不松手
在页面中移动，让元素跟随鼠标移动
松开鼠标，拖拽停止

  var oDiv = document.getElementsByTagName("div")[0];

        //1.按下
        oDiv.onmousedown = function(ev){
            var ev = window.event || ev;
            //鼠标的位置-oDiv的offset
            var a = ev.clientX - oDiv.offsetLeft;
            var b = ev.clientY - oDiv.offsetTop;

            //2.拖动
            document.onmousemove = function(ev){
                var ev = window.event || ev;
                var l = ev.clientX - a;
                var t = ev.clientY - b;

                //3.元素随鼠标移动
                oDiv.style.left = l +"px";
                oDiv.style.top = t +"px";
            }

            //4.松手取消move
            document.onmouseup = function(){
                document.onmousemove = null;
            }

        }

拖拽的问题及解决

问题：如果拖拽的时候有选中的文字，浏览器默认拖拽文字
如果拖拽图片，浏览器默认是保存图片
解决：阻止浏览器的默认行为

  标准浏览器可以用return  false阻止事件默认行为
  ie不行，要使用全局捕获阻止，全局捕获只有ie有

添加全局捕获：标签.setCapture();
释放捕获：标签.releaseCapture();
元素只要添加了全局捕获会一直监听对应的事件，只要发现有对应的事件触发，就会截获事件，由添加了全局捕获的事件去处理，全局捕获使用完了以后，通过releaseCapture释放捕获，用完以后一定要释放，否则在页面中其他什么操作也做不了

  <p>kdljfalksjfdklsafjdklsajflkdajflkdjsaflkdsafjdklsajfkldjsalkfdjskfldsjflkdsjfldd</p>
    <div></div>
    <img src="pic.jpg" alt="">

    <script>
        //var oDiv = document.getElementsByTagName("div")[0];
        var oDiv = document.getElementsByTagName("img")[0];

        //1.按下
        oDiv.onmousedown = function(ev){
            var ev = window.event || ev;
            //鼠标的位置-oDiv的offset
            var a = ev.clientX - oDiv.offsetLeft;
            var b = ev.clientY - oDiv.offsetTop;

            //2.拖动
            document.onmousemove = function(ev){
                var ev = window.event || ev;
                var l = ev.clientX - a;
                var t = ev.clientY - b;

                //3.元素随鼠标移动
                oDiv.style.left = l +"px";
                oDiv.style.top = t +"px";
            }

            //4.松手取消move
            document.onmouseup = function(){
                if(oDiv.releaseCapture)oDiv.releaseCapture();
                document.onmousemove = null;
            }

            //兼容ie
            if(oDiv.setCapture){oDiv.setCapture();}
            //取消默认行为  return false  ie不兼容
            return false;
        }


    
    </script>

有缓冲的运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background: red;
            position: absolute;
            left:0px;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }
    </style>
</head>
<body>
   
    <div></div>
    <div style="width: 1px;height:500px;position: absolute;left:500px;background: green;"></div>

    <script src="ujiuye.js"></script>
    <script>
        var oDiv =  document.getElementsByTagName("div")[0];
        //点击运动
        oDiv.onclick = function(){
          //bufferMove(oDiv,"height",500);
        }
        function bufferMove(elem,attr,target){//运动元素elem，属性attr，目标值target 
            var timer = setInterval(function(){
                //1.获取当前值
                var cur = parseInt(getStyle(elem,attr));

                //2.计算速度
                var speed = (target-cur)/10;

                //3.处理小数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                //4.停止定时器
                if(cur == target){
                    clearInterval(timer);
                }

                //在当前值的基础上 + 速度
                elem.style[attr]= cur + speed +"px";
           },30)
        }
        
    </script>
</body>
</html>

/* 
* 获取元素样式
* @param {object}:elem 标签
* @param {string}:attr 属性名
 */
function getStyle(elem,attr){ 
    if(elem.currentStyle){
        var w = elem.currentStyle[attr]; 
    }else{
        var w = getComputedStyle(elem)[attr];
    }
    return w;
}

运动函数封装


```javascript
  var oDiv =  document.getElementsByTagName("div")[0];


        //点击运动
        oDiv.onclick = function(){
          //bufferMove(oDiv,"height",500);
        }


        function bufferMove(elem,attr,target){//运动元素elem，属性attr，目标值target 
            var timer = setInterval(function(){
                //1.获取当前值
                var cur = parseInt(getStyle(elem,attr));

                //2.计算速度
                var speed = (target-cur)/10;

                //3.处理小数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                //4.停止定时器
                if(cur == target){
                    clearInterval(timer);
                }

                //在当前值的基础上 + 速度
                elem.style[attr]= cur + speed +"px";
           },30)
        }

任意属性运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background: red;
            position: absolute;
            left:0px;
         /*    opacity: 0.3;
            filter: alpha(opacity=30); */
        }
    </style>
</head>
<body> 
    <div></div>
    <div style="width: 1px;height:500px;position: absolute;left:500px;background: green;"></div>

    <script src="ujiuye.js"></script>
    <script>
        var oDiv =  document.getElementsByTagName("div")[0];
        //点击运动
        oDiv.onclick = function(){
            bufferMove(oDiv,"width",100);
            bufferMove(oDiv,"height",100);
            bufferMove(oDiv,"opacity",20);
        }
        function bufferMove(elem,attr,target){//运动元素elem，属性attr，目标值target 
            var timer = setInterval(function(){
                //1.获取当前值
                if(attr == "opacity"){
                    var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
                }else{
                    var cur = parseInt(getStyle(elem,attr)); //放大了100倍
                }
                //2.计算速度
                var speed = (target-cur)/10;

                //3.处理小数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                //4.停止定时器
                if(cur == target){
                    clearInterval(timer);
                }

                //在当前值的基础上 + 速度
                if(attr == "opacity"){
                    elem.style[attr]= (cur + speed)/100; //没有px
                }else{
                     elem.style[attr]= cur + speed +"px";
                }             
           },30)
        }  
    </script>
</body>
</html>

多物体运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin-right: 10px;
        }

    </style>
</head>
<body>
    <div ></div>
    <div ></div>

    <script src="ujiuye.js"></script>
    <script>
        var oDiv = document.getElementsByTagName("div");
        oDiv[0].onmouseover = function(){
            bufferMove(oDiv[0],"height",500); //+？
        };
        oDiv[0].onmouseout = function(){
            bufferMove(oDiv[0],"height",100); //-
        }
        oDiv[1].onmouseover = function(){
            bufferMove(oDiv[1],"height",500); //+？
        };
        oDiv[1].onmouseout = function(){
            bufferMove(oDiv[1],"height",100); //-
        }            
        function bufferMove(elem,attr,target){//运动元素elem，属性attr，目标值target 
            //开启定时器之前，先清除掉之前的，保证运动方向
            clearInterval(elem.timer);
            elem.timer = setInterval(function(){
                //1.获取当前值
                if(attr == "opacity"){
                    var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
                }else{
                    var cur = parseInt(getStyle(elem,attr)); //放大了100倍
                }
                
                //2.计算速度
                var speed = (target-cur)/10;

                //3.处理小数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                //4.停止定时器
                if(cur == target){
                    clearInterval(elem.timer);
                }

                //在当前值的基础上 + 速度
                if(attr == "opacity"){
                    elem.style[attr]= (cur + speed)/100; //没有px
                }else{
                     elem.style[attr]= cur + speed +"px";
                }               
           },30)
        }
        
    </script>
</body>
</html>

多属性运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin-right: 10px;
        }

    </style>
</head>
<body>
    <div ></div>
 

    <script src="ujiuye.js"></script>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];

        oDiv.onclick = function(){
            //bufferMove(oDiv,"width",500);
            //bufferMove(oDiv,"height",500); //元素调用了两次函数，后面一次把前面一次覆盖

            //{"height":500,"width":500}
            bufferMove(oDiv,{"height":500,"width":500,"opacity":20});

        }
       


        function bufferMove(elem,attrs){//运动元素elem，属性attr，目标值target 
          
            //开启定时器之前，先清除掉之前的，保证运动方向
            clearInterval(elem.timer);//width
            elem.timer = setInterval(function(){
               
               for(var attr in attrs){
                    //1.获取当前值
                if(attr == "opacity"){
                    var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
                }else{
                    var cur = parseInt(getStyle(elem,attr)); //放大了100倍
                }
                
                //2.计算速度
                var speed = (attrs[attr]-cur)/10;

                //3.处理小数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                //4.停止定时器
                if(cur == attrs[attr]){
                    clearInterval(elem.timer);
                }

                //在当前值的基础上 + 速度
                if(attr == "opacity"){
                    elem.style[attr]= (cur + speed)/100; //没有px
                }else{
                     elem.style[attr]= cur + speed +"px";
                }
               }
               
           },30)
        }
        
    </script>
</body>
</html>

多属性运动的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin-right: 10px;
        }

    </style>
</head>
<body>
    <div ></div>
 

    <script src="ujiuye.js"></script>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];

        oDiv.onclick = function(){
            bufferMove(oDiv,{"height":500,"width":100});
        }
       


        function bufferMove(elem,attrs){//运动元素elem，属性attr，目标值target 
          
            //开启定时器之前，先清除掉之前的，保证运动方向
            clearInterval(elem.timer);//width
            elem.timer = setInterval(function(){
               var flag = true; //假设全部到达目标点
               for(var attr in attrs){
                        //1.获取当前值
                    if(attr == "opacity"){
                        var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
                    }else{
                        var cur = parseInt(getStyle(elem,attr)); //放大了100倍
                    }
                    
                    //2.计算速度
                    var speed = (attrs[attr]-cur)/10;

                    //3.处理小数
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    //4.停止定时器
                    if(cur != attrs[attr]){  //只要有一个属性没到目标点，说明假设不成立，flag=false
                        flag = false;
                    }

                    //在当前值的基础上 + 速度
                    if(attr == "opacity"){
                        elem.style[attr]= (cur + speed)/100; //没有px
                    }else{
                        elem.style[attr]= cur + speed +"px";
                    }
               }
               
               //所有的属性都到达了目标点，才能停止定时器
               if(flag){
                   clearInterval(elem.timer);
               }

           },30)
        }
        
    </script>
</body>
</html>

回调函数

      //回调函数，某个动作或某个操作作为以后执行的函数，回调函数，解决异步操作的重要途径
        //异步：和服务器请求数据的时候，可以去做其他的事情，如定时器
        //同步： 和服务器请求数据的时候，只能等待，不做其他事件  如for循环

        /* for(var i = 0;i<20000;i++){
            console.log(i);
        }
        console.log("a");
 */

        console.log("1");
        setTimeout(function(){
            console.log("a");
        },1000);
        console.log("2");


        function s(){
            
        }
    </script>

回调函数实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div ></div>
    <script src="ujiuye.js"></script>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        bufferMove(oDiv,{"width":500},function(){
            bufferMove(oDiv,{"height":500},function(){
                bufferMove(oDiv,{"opacity":20});
            })
        });
     
        function bufferMove(elem,attrs,fun){//运动元素elem，属性attr，目标值target 
          
          //开启定时器之前，先清除掉之前的，保证运动方向
          clearInterval(elem.timer);//width
          elem.timer = setInterval(function(){
             var flag = true; //假设全部到达目标点
             for(var attr in attrs){
                      //1.获取当前值
                  if(attr == "opacity"){
                      var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
                  }else{
                      var cur = parseInt(getStyle(elem,attr)); //放大了100倍
                  }
                  
                  //2.计算速度
                  var speed = (attrs[attr]-cur)/10;

                  //3.处理小数
                  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                  //4.停止定时器
                  if(cur != attrs[attr]){  //只要有一个属性没到目标点，说明假设不成立，flag=false
                      flag = false;
                  }

                  //在当前值的基础上 + 速度
                  if(attr == "opacity"){
                      elem.style[attr]= (cur + speed)/100; //没有px
                  }else{
                      elem.style[attr]= cur + speed +"px";
                  }
             }
             

             //所有的属性都到达了目标点，才能停止定时器
             if(flag){
                 clearInterval(elem.timer);
                 if(fun){ //有值，说明传了回调函数
                    fun();
                 }
             }
         },30)
      }    
    </script>
</body>
</html>

来源：CSDN

作者：yee只鸟儿.

链接：https://blog.csdn.net/yeee1128/article/details/103434340

标签