飘窗效果

  1. 第一种实现
  2. 第二种实现,更平滑

第一种实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮窗效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            border: 1px solid #eee;
            box-shadow: 0 0 5px #ccc;
            position: absolute;
        }

        #box h2 {
            padding: 8px 4px;
            font-size: 16px;
            color: #666666;
        }

        #box p {
            padding: 8px 4px;
            font-size: 12px;
            color: #a9a9a9;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div id="box">
    <img src="octocat.png" alt="章鱼猫"/>
    <p><a href="#">章鱼猫</a></p>
</div>
<script>
    let box = document.getElementById('box');
    let speedX = 15, speedY = 12;
    //水平方向运动最大值
    let
        maxL = document.documentElement.clientWidth - box.offsetWidth;
    maxT = document.documentElement.clientHeight - box.offsetHeight;
    let timer = null;
    box.onmouseenter = function () {
        clearInterval(timer);
    };
    box.onmouseleave = function () {
        autoMove();
    };
    autoMove();

    function autoMove() {
        timer = setInterval(() => {
            let
                nextX = box.offsetLeft + speedX;
            nextY = box.offsetTop + speedY;

            //左侧边界
            if (nextX <= 0) {
                nextX = 0;
                speedX *= -1;
            }
            //上侧边界
            if (nextY <= 0) {
                nextY = 0;
                speedY *= -1;
            }
            //右侧边界
            if (nextX >= maxL) {
                nextX = maxL;
                speedX *= -1;
            }
            //底侧边界
            if (nextY >= maxT) {
                nextY = maxT;
                speedY *= -1;
            }
            box.style.left = nextX + 'px';
            box.style.top = nextY + 'px';
        }, 80);
    }
</script>
</body>
</html>

第二种实现,更平滑

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>飘窗效果</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px
        }

        #ad {
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
<div id="ad"><img src="octocat.png" alt="章鱼猫"/>
    <p><a href="#">章鱼猫</a></p></div>

</body>

<script type="text/javascript">
    //通过ID获取img
    ad = document.getElementById("ad");
    //定义横纵坐标
    x = 0;
    y = 0;
    //设置初始速度
    xv = 1.5;
    yv = 1.5;

    //根据img横纵坐标位置,设置反方向速度
    function fun() {
        if (x < 0 || x > window.innerWidth - ad.offsetWidth) {
            xv = -xv;
        }
        if (y < 0 || y > window.innerHeight - ad.offsetHeight) {
            yv = -yv;
        }
        x += xv;
        y += yv;
//将xy坐标值赋予img css样式中的left与top
        ad.style.left = x + "px";
        ad.style.top = y + "px";
    }

    //定时器调用
    mytime = setInterval(fun, 100);
    //ad绑定鼠标悬停事件
    ad.onmouseover = function () {
//清除定时器
        clearInterval(mytime);
    }
    //鼠标离开,重新触发定时器
    ad.onmouseout = function () {
        mytime = setInterval(fun, 100);
    }</script>
</html>

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 [email protected]

文章标题:飘窗效果

文章字数:582

本文作者:Spaceack

发布时间:2020-01-07, 04:00:00

最后更新:2020-01-21, 06:26:40

原始链接:http://spaceack.com/2020/01/07/2020-01-07-js-floating-window/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录