使用JavaScript制作动画

最新推荐文章于 2024-06-20 09:32:37 发布

Blue92120

最新推荐文章于 2024-06-20 09:32:37 发布

阅读量738

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Blue92120/article/details/127381539

版权

本文介绍了如何使用JavaScript创建一个拖拽动画效果。当点击滑块并拖动时，如果滑块超过背景开关宽度的一半，灯泡亮起；反之则熄灭。松开鼠标时，滑块会根据位置居左或居右。通过修改滑块的margin-left样式值，结合鼠标的按下、移动、抬起事件，实现了这个动画效果。

摘要由CSDN通过智能技术生成

　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)，那么滑块也移动多大的距离，要想让滑块移动，最简单的做法可以直接修改滑块的mar

最低0.47元/天解锁文章

Blue92120

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript制作动画

比如使用定位，我们可以使用相对定位来个开关和背景布局，修改开关的left值也是一样的。当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起;小于一半时，灯泡熄灭。当我们中途鼠标按键抬起时，如果滑块左外边距超过背景开关宽度的一半，那么滑块最终居右;反之，滑块最终居左。鼠标移动多大的距离(moveX-startX)，那么滑块也移动多大的距离，要想让滑块移动，最简单的做法可以直接修改滑块的margin-left样式值。4.javascript代码实现动画。2.html代码准备。
复制链接

扫一扫