使用JavaScript制作动画

旧城等待， 2023-10-10 15:12 10阅读 0赞

1.动画效果描述

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

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样式值。如图所示：

![9d1520a89e6877054236af69a310f177.jpeg][]

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值也是一样的。但是涉及到的事件依然是鼠标的按下、移动、抬起、移除事件。

[9d1520a89e6877054236af69a310f177.jpeg]: https://img-blog.csdnimg.cn/img_convert/9d1520a89e6877054236af69a310f177.jpeg

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript怎么制作动画？

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

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

相关使用JavaScript制作动画

　1.动画效果描述当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起;小于一半时，灯泡熄灭。当我们中途鼠标按键抬起时，如果滑块左外边距超过背

旧城等待，/ 2023年10月10日 15:12/ 0 赞/ 11 阅读

相关使用 SVG 制作加载动画

![format_png][] 最近我们设计师反馈，他想要做如下的一个加载动画。但是要么效果好的导出的 GIF 体积特别大，看了下有 8M 多了，要么体积小的 GIF

缺乏、安全感/ 2022年12月09日 04:59/ 0 赞/ 189 阅读

相关 JavaScript制作动画

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

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

相关 cocosudio 骨骼动画制作

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

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

相关制作翻转效果动画

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

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

相关制作svg动画

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

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

相关使用Expression Blend制作Silverlight动画（视频教程）

摘要：目前Silverlight开发方面的教程相对比较多，但是在动画制作方面的内容好像不是太多，这里自己录制了几个动画制作的小视频，初学者可以参考一下。主要内容 1.

小鱼儿/ 2022年05月15日 01:36/ 0 赞/ 135 阅读

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

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

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

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

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

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