doMove函数实现移动

最新推荐文章于 2018-12-08 10:28:22 发布
最新推荐文章于 2018-12-08 10:28:22 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： js学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34376264/article/details/77752719
版权

我最终的目的是用源生js代码封装一个domove（）函数，可以在传参之后实现元素任意方向的运动，在达到最终目的前应该一步一步地完成： 
1.配合之前封装过的getstyle()函数，实现点击按钮之后让一个div向前移动10px的效果：

<body>
    <button id="btn">前进</button>
    <div id="div1" style="width:100px; height:100px; background:red; margin-top:20px; position:absolute;"></div>
    <script>
        var oBtn=document.getElementById("btn");
        var oDiv=document.getElementById("div1");
        function getstyle(obj,attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
        }
        oBtn.onclick=function(){
            var nowPosition =parseInt(getstyle(oDiv,'left'));
            oDiv.style.left=nowPosition+10+'px';
        }
    </script>
</body>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

2.用两个按钮分别控制div向前向后动 
3.把div向前向后动改成上下左右移动 
· 
· 
· 
按照这样的思路，再结合计时器，最终一步步实现一点按钮就能使元素连贯地变到目的的样式：

function doMove(id,derection,speed,subjectPosition){
//id:要运动的元素；derection:以什么方向为参照来运动（left、right、top、bottom）;speed:计时器每循环一次移动的距离；subjectPosition：运动所要达到的样式的值
        speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;//判断运动的方向
        clearInterval(getid(id).timer);
        getid(id).timer=setInterval(function(){
            var nowPosition =parseInt(getstyle(getid(id),derection));
            var thisPosition=nowPosition+speed;
            if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
            //判断有无达到目标点
                thisPosition=subjectPosition;
                clearInterval(getid(id).timer);
            }
            getid(id).style[derection]=thisPosition+'px';
        },30)
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

例如：模拟一些网页，做一个“点击有惊喜”的效果。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:800px; height:800px; background:#000; position:relative;left:50%; margin-left:-400px;}
#div2{width:30px; height:200px; background:#666; color:#fff;text-align:center; padding-top:50px; position:absolute; right:0; top:40%; cursor:pointer;}
#div3{width:80px; height:200px; background:#69F; color:#909;text-align:center; padding-top:50px; position:absolute; right:-80px; top:40%;}
</style>
</head>

<body>
<div id="div1">
    <div id="div2">点击有惊喜</div>
    <div id="div3">啦啦啦啦啦啦我就是惊喜！</div>
</div>
<script src="myjs/myjs.js"></script>
<script>
    var click=true;
    getid('div2').onclick =function(){
        if(click==true){
            doMove('div2','right',10, parseInt(getstyle(getid('div3'),'width')));
            doMove('div3','right',10,0);
            click=false;
        }else{
            doMove('div2','right',10,0);
            doMove('div3','right',10,-parseInt(getstyle(getid('div3'),'width')));
            click=true;
        }
    }
    function doMove(id,derection,speed,subjectPosition){
        speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
        clearInterval(getid(id).timer);
        getid(id).timer=setInterval(function(){
            var nowPosition =parseInt(getstyle(getid(id),derection));
            var thisPosition=nowPosition+speed;
            if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
                thisPosition=subjectPosition;
                clearInterval(getid(id).timer);
            }
            getid(id).style[derection]=thisPosition+'px';
        },30)
    }
</script>
</body>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

未点击之前： 
这里写图片描述

点击之后： 
这里写图片描述

domove()函数封装好了，接下来说一下JavaScript的回调函数：

1.定义：回调函数就是把我们一个函数执行完毕后再随即执行的一个函数； 
2.但是回调函数不是一定有的，因此在一段程序结束的地方需要做一个判断：if(endFn){endFn();} 
也可以写为：endFn&&endFn(); 
这两者等价 
注：未定义就返回未定义，否则在一段程序执行完后紧接着执行回调函数里面的内容。

例：利用回调函数让一个div做向右、向下、向左再向上回到原点的运动（当然，运动到上、下、左、右的边界值都已经提前设定好）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red; position:absolute; top:40px; left:40px;}
</style>
</head>

<body>
<input type="button" value="走" id="btn1" />
<div id="div1"></div>
<script src="myjs/myjs.js"></script>
<script>
    getid('btn1').onclick =function(){
        doMove('div1','left',10,800,function endFn(){
            doMove('div1','top',10,500,function endFn(){
                doMove('div1','left',10,40,function endFn(){
                    doMove('div1','top',10,40);
                })
            });
        });
    };
    function doMove(id,derection,speed,subjectPosition,endFn){
        speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
        clearInterval(getid(id).timer);
        getid(id).timer=setInterval(function(){
            var nowPosition =parseInt(getstyle(getid(id),derection));
            var thisPosition=nowPosition+speed;
            if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
                thisPosition=subjectPosition;
            }
            getid(id).style[derection]=thisPosition+'px';
            if(parseInt(getstyle(getid(id),derection))===subjectPosition){
                clearInterval(getid(id).timer);
                endFn&&endFn();
            }
        },30)
    }
</script>
</body>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

接下来就是关于以上内容的练习：

练习1：写四个按钮，分别是“向左”、“向右”、“向上”和“向下”，点击哪个按钮就让元素向相应的方向移动，并且遇到四边设定的边界就停止运动

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red; position:absolute; top:40px; left:40px;}
</style>
</head>

<body>
<input type="button" value="向右" id="btn1" />
<input type="button" value="向左" id="btn2" />
<input type="button" value="向下" id="btn3" />
<input type="button" value="向上" id="btn4" />
<div id="div1"></div>
<script src="myjs/myjs.js"></script>
<script>
    getid('btn1').onclick =function(){doMove('div1','left',10,800);};
    getid('btn2').onclick =function(){doMove('div1','left',10,40);};
    getid('btn3').onclick =function(){doMove('div1','top',10,800);};
    getid('btn4').onclick =function(){doMove('div1','top',10,40);};
    function doMove(id,derection,speed,subjectPosition){
        speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
        clearInterval(getid(id).timer);
        getid(id).timer=setInterval(function(){
            var nowPosition =parseInt(getstyle(getid(id),derection));
            var thisPosition=nowPosition+speed;
            if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
                thisPosition=subjectPosition;
                clearInterval(getid(id).timer);
            }
            getid(id).style[derection]=thisPosition+'px';
        },30)
    }
</script>
</body>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

练习2：在页面上布局平铺20个50X50红色的方块，点击我们的浏览器的窗口时让每个方块每隔0.2秒以每0.1秒30像素的速度掉下来一个，直到所有的方块掉到500的位置

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0; padding:0;}
li{list-style:none;width:50px; height:50px; background:#666; position:absolute; top:0;;}
</style>
</head>
<ul id="ul1">
</ul>
<body>
<script src="myjs/myjs.js"></script>
<script>
    var oUl1=document.getElementById("ul1");
    var aLi=oUl1.getElementsByTagName("li");
    var str="";
    for(var i=0;i<20;i++){
        str+="<li></li>";
    }
    oUl1.innerHTML=str;
    for(var i=0;i<20;i++){
        aLi[i].style.left=(i+1)*51+"px";
    }
    window.onclick=function(){
        var i=0;
        setInterval(function(){
            doMove(aLi[i],'top',30,500);
            i++;
        },200)//此处是在计时器里的循环，相当于双重循环
    }
    function doMove(id,derection,speed,subjectPosition){
        speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
        clearInterval(getid(id).timer);
        getid(id).timer=setInterval(function(){
            var nowPosition =parseInt(getstyle(getid(id),derection));
            var thisPosition=nowPosition+speed;
            if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
                thisPosition=subjectPosition;
                clearInterval(getid(id).timer);
            }
            getid(id).style[derection]=thisPosition+'px';
        },30)
    }
</script>
</body>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

效果图大致是这样的： 
这里写图片描述

2.正反方向“有缝”轮播图（哈哈，后面再说无缝轮播图）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="common.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
#ul1{position:relative;}
#ul1 li{width:400px; height:500px; float:left;}
#div1{width:400px; height:500px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; overflow:hidden;}
</style>
</head>
<body>
<div id="div1">
    <ul id="ul1" class="clearfix">
        <li><img src="img/1.png" width="400" height="500"/></li>
        <li><img src="img/2.png" width="400" height="500"/></li>
        <li><img src="img/3.png" width="400" height="500"/></li>
        <li><img src="img/4.png" width="400" height="500"/></li>
    </ul>
</div>
<button>正方向轮播</button>
<button>反方向轮播</button>
<script src="myjs/myjs.js"></script>
<script>
var aBtn=document.getElementsByTagName("button");
var timer=null;
var num=0;
var aLi =getid('ul1').getElementsByTagName('li');
aBtn[0].onclick=function(){fn(aLi.length-1,0,"++");}
aBtn[1].onclick=function(){fn(0,aLi.length-1,"--");}
/*将变换图片轮播方向的这段代码封装在JS文件内。
    aBtn[0].onclick=function(){
    clearInterval(timer);
    var aLi =getid('ul1').getElementsByTagName('li');
    getid('ul1').style.width = parseInt(getstyle(aLi[0],'width'))*aLi.length +'px';
    var num = 1;
    timer=setInterval(function(){
        doMove('ul1','left',20,-num*parseInt(getstyle(aLi[0],'width')));
        if(num ==aLi.length-1){
            num = 0;
        }else{
            num++;
        }

    },4000);
}
aBtn[1].onclick=function(){
    clearInterval(timer);
    var aLi =getid('ul1').getElementsByTagName('li');
    getid('ul1').style.width = parseInt(getstyle(aLi[0],'width'))*aLi.length +'px';
    var num = 3;
    timer=setInterval(function(){
        doMove('ul1','left',20,-num*parseInt(getstyle(aLi[0],'width')));
        if(num ==0){
            num = aLi.length-1;
        }else{
            num--;
        }

    },4000);
}*/
</script>
</body>
Doris ampson
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计时器的深入学习1（实现运动效果的domove()函数的封装过程及回调函数）
pleasecallme_522的博客
11-09 2275
我最终的目的是用源生JS代码封装一个domove（）函数，可以在传参之后实现元素任意方向的运动，在达到最终目的前应该一步一步地完成： 1.配合之前封装过的getstyle()函数，实现点击按钮之后让一个div向前移动10px的效果：<body> <button id="btn">前进</button> <div id="div1" style="width:100px; heigh
Dotween的学习.2 DOMove()
weixin_42374647的博客
10-25 1万+
当引入DOTween这个插件以后 使用DG.Tweening; 每一个物体都会拥有这个方法 panelTransform.DOMove（new Vector3（0,0,0），1）; 从当前位置移动到DOMove（）函数指定的地方 第一个参数就是要移动到的地方。第二个参数就是移动的时间 面板移动前， 点击按钮以后 代码却意外的简单 然而移动位置不对 所以我们换成局部坐标移动 ...
动画函数 doMove.js
erdouzhang
08-04 2129
用动画可以直接引用这个动画函数文件，然后调用doMove（）函数。 js： 'use strict'; // 运动函数 function $(id){return document.getElementById(id);} function doMove(obj,attr,dir,target,endFn){//参数分别代表：元素、上下左右方向运动、方向（正反方向）、
匀速运动之停止条件
小漠007的专栏
10-21 1065
***************************匀速运动 1****************************************                     body{margin:0;padding:0;}         div{width:100px;height:100px;background:red;position: abso
iTween研究院之学习笔记Move移动篇
苗伟业的专栏
01-31 2842
iTween.MoveTo()： 让模型移动到一个位置，它的底层函数是通过动态的修改模型每一帧的transform.position完成的，所以它会百分之百到达目标点，不会出现误差。 iTween.MoveFrom():它和上面的一样，iTween.MoveTo()是将模型移动到目标位置，而iTween.MoveFrom()是将模型从目标位置移动到原始位置。 iTween.MoveAdd()
refactor_fcn_name:更改在您的 m 文件中调用的函数的名称，并可选择移动它。-matlab开发
05-30
重构函数名，更改路径中对函数名的所有引用，并将函数文件移动到新命名的文件中 句法 refactor_fcn_name(fcnname, newfcnname) refactor_fcn_name(fcnname, newfcnname, topdir) refactor_fcn_name(fcnname, ...
DOS简易版C语言贪吃蛇
08-25
4. doMove() 函数：蛇的移动实现函数，负责蛇的实际移动。 5. eat() 函数：蛇吃食物的函数，负责蛇吃食物的逻辑。 6. keydown() 函数：键盘输入函数，负责处理键盘输入事件。 7. foods() 函数：食物生成函数，负责...
DOTween（HOTween v2）（一个好用的Unity动画制作插件）
最新发布
01-05
开发者可以创建自己的动画类型，或者利用现有的扩展模块如DOColor、DOMove等，来快速实现特定需求。对于大型项目，DOTween还支持拆分到多个组件，以实现更细粒度的管理和优化。 总的来说，DOTween（HOTween v2）是...
DOTweenPro.zip
11-29
gameObject.DOMove(new Vector3(x, y, z), duration).DORotate(new Vector3(a, b, c), duration).DOScale(new Vector3(scaleX, scaleY, scaleZ), duration); ``` 此外，DOTween Pro还支持延迟开始、循环播放、回调...
DOTween 使用方法.zip_JI2_unity
09-23
在Unity引擎的开发过程中，我们常常需要进行各种动画效果的实现，这包括但不限于物体的移动、旋转、缩放等。DOTween，全称为"DOTween Pro"，是一款专为Unity设计的高效、易用且功能强大的Tweening库。它极大地简化了...
DoTween全解析（入门篇）
penchaoo
12-19 5万+
DoTween全解析（一） 概述： DoTween，Itween，这些名字作为一个Unity开发人员听起来并不陌生，它们在动画方面表现出了令人折服的能力，今天我带着大家来一起认识一下这款插件。
Dotween常用方法详解
热门推荐
蓝天小僧的博客
12-08 10万+
Dotween是unity里非常常用的插件，但是很多人应该没有仔细的阅读过它的api，它实际有很多好用的方法，下面我就针对一些相对常用的方法，做下总结： 一、Unity常用组件拓展方法 (1) Transform拓展方法 1）Position 改变世界坐标 移动方法，第一个参数是要移动到的目标点，不是移动这个向量的距离 transform.DOMov...
DOTWeen的学习3 DOMove().from()的用法
weixin_42374647的博客
10-30 3435
xxx.DOMoveX（目标位置，移动时间）从当前位置移动到目标位置 xxx.DOMoveX（目标位置，移动时间）。从（）从目标位置移动到当前位置 xxx.DOMoveX（目标位置，移动时间）。从（真）加上真以后表示从当前位置+目标位置移动到当前位置也就是相对移动...
封装的运动函数 doMove
ee_Andy的博客
09-12 428
封装好的运动函数 doMove function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = pa
[Unity插件]DOTween基础
程序人生
03-14 3万+
官方文档链接：http://dotween.demigiant.com/documentation.php#globalSettings普通版下载地址：http://dotween.demigiant.com/download.phppro版下载地址：http://pan.baidu.com/s/1dEzTQkL(pro版提供DOTween Animation和DOTween Path这两个组件，
DoTween的使用与详解
小牧的博客
07-17 5万+
转载请注明出处
Unity3D 学习日记（七） DoTween学习笔记之Move（一）
Bě9oniǎ 的博客
04-25 9994
Unity3D 为了游戏的效果或者游戏的美观性，常常需要一些UI的动画来美化游戏的界面。 那么UI常用到的动画制作方法有哪些呢？项目中常用到的ITween、DoTween这两个插件来制作补间动画，也有人会用Unity3D自带的动画功能来K帧制作动画效果（这个方法我还不久前听说的，作为一个屌丝程序不能接受这个K帧动画的方法，虽然使用方法很简单但是细节这些没办法自己用代码操控，以及动画管理上、内存、
Unity插件之DoTween动画插件(适合初学者)
胖胖的橘猫君
02-23 6万+
引言：小生今日分享的是NB哄哄的动画插件DoTween的学习记录适合人群：Unity初学者开启学习之旅吧！简介：DoTween作为一款动画插件，前身是HOTween，支持可视化编辑，适用于2D和3D场景。插件可以在资源商店购买，分为免费版和收费版。这里提供一个Pro版的！官网：http://dotween.demigiant.com/  链接：https://pan.baidu.com/s/1mi...
domove和dolocalmove
07-27
domove和dolocalmove是CSDN开发的两个函数，用于在编程中进行对象的移动操作。 domove函数用于在程序中对对象进行移动操作。它会根据指定的目标位置，将对象从当前位置移动到目标位置。这个函数通常用于全局移动，即将对象从一个位置移动到另一个位置。 dolocalmove函数则是用于在程序中进行局部移动操作。与domove函数不同的是，dolocalmove函数将对象从当前位置相对移动到指定的相对位置。这个函数通常用于局部移动，即对象在当前位置的基础上进行微调。 这两个函数可以根据具体的编程语言和应用场景进行使用和调整，具体的使用方式和参数也可能会有所差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值