js实现广告移动窗口效果

冬天不会冷ll

于 2023-07-11 08:50:22 发布

阅读量309

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_48567214/article/details/131652275

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript">
        window.onload = function () {
            //写入
            var oneInner = document.createElement("div");
            oneInner.setAttribute("style", "background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");
            var oneButton = document.createElement("input");
            oneButton.setAttribute("type", "button");
            oneButton.setAttribute("value", "x");
            if (oneButton.style.cssFloat) {
                oneButton.style.cssFloat = "right"
            }
            else { oneButton.style.styleFloat = "right" }
            oneInner.appendChild(oneButton);
            document.body.appendChild(oneInner);

            //定时器
            var a1a = setInterval(moves, 100);
            //函数


            var x = 10;
            var y = 10;

            function moves() {
                var tops = oneInner.offsetTop
                var lefts = oneInner.offsetLeft

                if (lefts >= document.documentElement.clientWidth - oneInner.offsetWidth || lefts <= 0) {
                    x = -x
                }

                if (tops >= document.documentElement.clientHeight - oneInner.offsetHeight || tops <= 0) {
                    y = -y
                }

                tops += y;
                lefts += x;

                oneInner.style.top = tops + "px"
                oneInner.style.left = lefts + "px"
            }

            //悬停停止
            oneInner.onmouseover = function () {
                clearInterval(a1a);
            }
            //放手继续运动
            oneInner.onmouseout = function () {
                a1a = setInterval(moves, 100);
            }
            //删除
            oneButton.onclick = function () {
                document.body.removeChild(oneInner);
            }
        }
    </script>

</head>

<body>
</body>

</html>