JavaScript怎么制作动画？

最新推荐文章于 2024-08-31 23:42:40 发布

骨灰级收藏家

最新推荐文章于 2024-08-31 23:42:40 发布

阅读量500

点赞数

分类专栏：前端 JavaScript 互联网文章标签： javascript html css

本文链接：https://blog.csdn.net/JACK_SUJAVA/article/details/127517156

版权

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

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">
    &l