JavaScript怎么制作动画？

Bertha 。 2024-04-01 10:36 66阅读 0赞

![55bac8d1f9a345e6b76071992058cb21.gif][]

当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起；小于一半时，灯泡熄灭。当我们中途鼠标按键抬起时，如果滑块左外边距超过背景开关宽度的一半，那么滑块最终居右；反之，滑块最终居左。

### 2.html代码准备 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>电灯开关</title>
        <style>
            div{
                /*border: 1px solid red;*/
                width: 140px;
                height: 40px;
                margin: auto;
                background: url("./img/switch.png");
            }
        </style>
    </head>
    <body>
        <center>
            <img src="img/off.gif" id="light">
        </center>
        <div>
            <img src="img/button.png" id="slideBtn">
        </div>
    </body>
    </html>

### 3.拖拽分析 ###

鼠标移动多大的距离(moveX-startX)，那么滑块也移动多大的距离，要想让滑块移动，最简单的做法可以直接修改滑块的margin-left样式值。如图所示：

![357dfb526eec4900a2085f143815df1d.png][]

### 4.javascript代码实现动画 ###

<script>
            window.onload=function () {
                //获取滑块按钮元素对象
                var slideBtn = document.getElementById("slideBtn");
                //获取背景开关div的宽度
                var mWidth = document.getElementById("switchBg").offsetWidth;
                //获取灯泡图片元素
                var light=document.getElementById("light");
                //定义一个变量表示是否按下鼠标
                var isDown=false;//默认没有按下
                var startX;//按下点X轴坐标
                var marginLeft=0;//默认左外边距是0
                var flag=false;//默认灯泡没有亮
                //绑定鼠标按下事件
                slideBtn.onmousedown=function () {
                    //表示已经按下了
                    isDown=true;
                    //保存按下的点X坐标值
                    startX=event.screenX;
                    return false;
                }
                //绑定鼠标移动事件
                slideBtn.onmousemove=function () {
                    if(isDown){//按下了之后才执行拖拽操作
                        //获取移动的坐标x
                        var moveX = event.screenX;
                        //计算查找，也就是移动的距离
                        var dx=moveX-startX;
                        startX=moveX;
                        //让滑块按钮左外边距移动dx像素
                        marginLeft+=dx;
                        //marginLeft不能大于mWidth/2，不能小于0
                        marginLeft=marginLeft>=mWidth/2?mWidth/2:marginLeft;
                        marginLeft=marginLeft<=0?0:marginLeft;
                        //设置滑块按钮的左外边距
                        slideBtn.style.marginLeft=marginLeft+"px";
                        //如果左外边距>mWidth/4 px，那么灯泡就亮
                        if(marginLeft>=mWidth/4 && !flag){
                            light.src="img/on.gif"
                            flag=!flag
                        }else if (marginLeft<=mWidth/4 && flag){
                            light.src="img/off.gif"
                            flag=!flag
                        }
                    }
                    return false;
                }
                //绑定鼠标按键抬起事件
                slideBtn.onmouseup=function () {
                    //最终按钮要复位，左外边距<mWidth/4就回到最左边，否则回到最右边
                    slideBtn.style.marginLeft=(marginLeft>=mWidth/4)?mWidth/2+"px":"0px"
                    isDown=false;//鼠标按键抬起了
                }
                //鼠标移出事件
                slideBtn.onmouseout=function () {
                    isDown=false;//鼠标按键抬起了,否则下次在移入到滑块身上，isDown还是true，会导致我们没有按下鼠标就能拖动滑块
                }
            }
        </script>

### 5.总结： ###

这是一个比较简单的小动画，当然我们不使用margin-left也能完成。比如使用定位，我们可以使用相对定位来个开关和背景布局，修改开关的left值也是一样的。但是涉及到的事件依然是鼠标的按下、移动、抬起、移除事件。

[55bac8d1f9a345e6b76071992058cb21.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/af173f1a8a4348d48ad0d84592dae940.gif
[357dfb526eec4900a2085f143815df1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e4398017492d447e98a065483271160e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript怎么制作动画？

![55bac8d1f9a345e6b76071992058cb21.gif][] 当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起；小于一

Bertha 。/ 2024年04月01日 10:36/ 0 赞/ 67 阅读

相关 3D动画制作过程

互联网的形态一直以来都是2D模式的，但是随着3D技术的不断进步，国产动漫也正是这个时候崛起了，在未来的5年时间里，将会有越来越多的互联网应用以3D的方式呈现给用户，包括网络视讯

小灰灰/ 2023年01月10日 03:57/ 0 赞/ 208 阅读

相关 scratch怎么制作2021文字动画?

删除小猫角色。这里猫儿不需要。绘制2，0，2，1四个角色。把事件之点击绿旗拖入脚本区。先选中2这个角色，才能设置脚本。其它三个角色依次类推。添加1秒内移动到某特定X

小鱼儿/ 2022年10月25日 00:49/ 0 赞/ 129 阅读

相关 JavaScript制作动画

JavaScript制作动画 ![在这里插入图片描述][20210402215923423.gif] <!DOCTYPE html> <html>

绝地灬酷狼/ 2022年10月22日 01:40/ 0 赞/ 162 阅读

相关 cocosudio 骨骼动画制作

首先基本步骤转官方文档后续学习实现新建骨骼动画首先点击屏幕右上角的文件->新建文件（快捷键：Command+N），打开如下界面，选择骨骼动画，点创建：

雨点打透心脏的1/2处/ 2022年09月22日 15:59/ 0 赞/ 445 阅读

相关制作翻转效果动画

经测试改动画在移动端兼容有一些问题，要兼容移动端可前往[https://blog.csdn.net/u012011360/article/details/92766950][h

女爷i/ 2022年08月04日 04:08/ 0 赞/ 212 阅读

相关制作svg动画

要实现一步一步画出来一个图片，css3做不到吧，除非一张张的图片定时显示。想不到别的招了。现在用的是一个插件，做了一个svg动画。插件地址：http://lazylinep

不念不忘少年蓝@/ 2022年08月03日 03:08/ 0 赞/ 239 阅读

相关 svg入门制作简易动画

svg的分量越来越重要了，如果你学好了svg也能在前段站住一席之地今天主要使用svg制作一个简易的人物动画；纯手工制作，有些粗糙，主要是熟悉svg，各位看了之后可以试

╰半夏微凉°/ 2022年05月29日 12:13/ 0 赞/ 542 阅读

相关 [译] JavaScript 线性代数：使用 ThreeJS 制作线性变换动画

> 原文地址：[Linear Algebra with JavaScript: Animating Linear Transformations with ThreeJS

Love The Way You Lie/ 2022年01月10日 08:23/ 0 赞/ 620 阅读

相关 JavaScript 线性代数：使用 ThreeJS 制作线性变换动画

目标在本文中，我们将制作一个组件，用于对三维空间的对象的线性变换进行可视化。最终效果如下面的动图所示，或者你也可以在[此网页][Link 1]体验。 ![app

一时失言乱红尘/ 2021年09月20日 05:44/ 0 赞/ 803 阅读