原生js实现悬浮框滑动动画

最新推荐文章于 2023-04-27 17:57:46 发布

weixin_30246221

最新推荐文章于 2023-04-27 17:57:46 发布

阅读量362

点赞数

原文链接：http://www.cnblogs.com/qingfengliuyun092815/p/8250662.html

版权

　　最近在做个人博客想做个相册，鼠标悬浮后出现个div并且鼠标移动到哪个相册，div跟随到哪个相片上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .imgCon {
        float: left;
    }

    img {
        display: block;
        float: left;
        margin: 0px;
        padding: 0px;
        width: 300px;
        height: 200px;
    }
    /*img:hover {
        z-index: -2;
        transform: scale(1.3);
        transition: transform 2s;
    }*/

    .upimg {
        position: relative;
        width: 300px;
        height: 200px;
        opacity: 0.6;
        background-color: black;
        /*display: none;*/
        visibility: hidden;
        transition: all 1s ease-in-out;
    }

    .hut {
        width: 600px;
        margin-left: 300px;
    }
    </style>
</head>

<body>
    <div class="hut" οnmοuseοver="getposition()">
        <div class="imgCon">
            <img src="1.jpg" id="img1">
            <div class="upimg" id="upimg"></div>
        </div>
        <img src="1.jpg" >
        <img src="1.jpg" >
        <img src="1.jpg" >
    </div>
    <script type="text/javascript">

    function getposition() {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX
        var y = e.pageY || e.clientY + scrollY;
        var img = document.getElementById('img1')
        var upimg = document.getElementById('upimg')
        upimg.style.visibility = 'visible'
        upimg.style.left = `${parseInt(x / 300) * 300 - 300}px`
        upimg.style.top = `${parseInt(y / 200) * 200}px`
        return { 'x': x, 'y': y };
    }
    </script>
</body>

</html>

　　上面给出了代码，首先是判断鼠标坐标xy，然后取整，设置悬浮div的坐标，然后通过设置transition来实现动画，很简单。欢迎指正

转载于:https://www.cnblogs.com/qingfengliuyun092815/p/8250662.html