JS实现漂浮广告功能

最新推荐文章于 2024-03-15 11:32:13 发布

前端菜菜阿海

最新推荐文章于 2024-03-15 11:32:13 发布

阅读量7k

点赞数 10

分类专栏：前端学习之JavaScript

本文链接：https://blog.csdn.net/zxh996/article/details/118655180

版权

JavaScript 漂浮广告网页设计事件监听 DOM操作

关键词由CSDN通过智能技术生成

前端学习之JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS实现漂浮广告功能

前言
一、漂浮广告案例

前言

漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。

一、漂浮广告案例

我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。

代码如下（示例）：

    <style type="text/css">
        #div1 {
            width: 300px;
            height: 300px;
            padding: 0;
            margin: 0;
            position: fixed;
            left: 0;
            top: 0;
        }
        #div1 img {
            width: 300px;
            height: 300px;
        }
    </style>
    <script>
        window.onload = function () {
            //获取元素
            var div1 = document.getElementById('div1');
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            var gox = 1;
            var goy = 1;
            var a=0;
            //广告漂浮
            function move() {
                var x = div1.offsetLeft;
                var y = div1.offsetTop;
                if (x > w - 300 || x < 0) gox = -gox;
                div1.style.left = x + (10 * gox) + 'px';
                if (y > h - 300 || y < 0) goy = -goy;
                div1.style.top = y + (10 * goy) + 'px';
            }
            //漂浮定时器
            var timer = setInterval(move, 30);
            //移入移出时广告的浮动
            div1.onmouseover = function () {
                clearInterval(timer);
            }
            div1.onmouseout = function () {
                timer = setInterval(move, 30);
            }
            //点击一次跳转到另一个页面，点击两次广告消失
            div1.onclick = function() {
                if (a === 0) {
                    var neww = window.open('_blank');
                    neww.location = "http://www.baidu.com";
                    a++;
                } else {
                    this.style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
<div id="div1">
    <img src="1.png" alt=""/>
</div>
</body>