鼠标控制图片移动-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37744981/article/details/62893001

很简单的一个小Demo，通过控制鼠标事件以及其定位，来达到上下移动的目的。
页面结构分析：

外部盒子div中包括一个img标签、两个span标签
img标签采用绝对定位，外部div盒子为相对定位
当鼠标放在上面的span标签时让图片向上移动
当鼠标放在下面的span标签时让图片向下移动
js编程
1. 获取图片标签和上面的span标签
1. 给上面的span标签绑定onmouseover事件，事件触发的时候执行以下代码：
1. 开启一个定时器，定时器中通过全局变量不断减小图片的top值，让图片整个向上移动
1. 为防止鼠标进入多次触发以至于开启多个定时器，需要在鼠标进入的时候先执行清楚定时器；
1. 设置图片运动限制，判断是否已经运动到图片底部，当图片移动到底部的时候停止定时器，不让图片运动；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .xiaomi {
            width: 512px;
            height: 400px;
            border: 1px solid #f00;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        .xiaomi span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }

        .up {
            top: 0;
        }

        .down {
            bottom: 0;
        }

        .xiaomi img {
            position: absolute;
            top: 0;
            left: 0;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="xiaomi">
    <img src="mi.png" alt="" id="pic"/>
    <span class="up" id="goUp"></span>
    <span class="down" id="goDown"></span>
</div>
<script>
    var goUp = document.getElementById("goUp");
    var goDown = document.getElementById("goDown");
    var pic = document.getElementById("pic");
    var dist = 0;
    var timer = null;
    goUp.onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            dist -= 3;
            if (dist < -1070) {
                clearInterval(timer);
            } else {
                pic.style.top = dist + "px";
            }
        }, 30)//记得写时间!
    }
    goDown.onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            dist += 3;
            if (dist > 0) {
                clearInterval(timer);
            } else {
                pic.style.top = dist + "px";
            }
        }, 30)
    }
    goDown.parentNode.onmouseout = function () {
        clearInterval(timer);
    }


</script>
</body>
</html>

空间长图