原生JS实现漂浮广告的一种方法(Demo)

最新推荐文章于 2023-10-13 11:29:01 发布

ta_men

最新推荐文章于 2023-10-13 11:29:01 发布

阅读量2.5k

点赞数 4

分类专栏： Javascript Study Record 文章标签： javascript 漂浮广告

本文链接：https://blog.csdn.net/ta_men/article/details/62418844

版权

Javascript Study Record 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现效果 : 打开网页后,广告窗从指定位置开始在页面漂浮,当鼠标移入时窗口暂停运动,鼠标移出后,窗口在暂停处按原运动轨迹运动,窗口可关闭.

思路 : 实现运动效果需要依托定位属性,使用定时器重复执行代码改变定位,获得漂浮效果;设定不同的x(宽度)和y(高度)方向上每次改变的像素值,实现不同的漂浮轨迹;判断运动窗口达到可视区域边界时,改变x或y的正负值,实现反弹.

———————————更新———————————-

冷风吹醒(手动实验) :

element.style.left(/height/top/width)的使用 :

    在元素的css样式被初始赋值,未经后续赋值,此时element.style.left值为空(无论left初始值为多少),经过后续赋值后才会有值.

完整代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                          //全局reset
                padding: 0;
                margin: 0;
            }
            #advts{
                position: absolute;
                /*left: 0;              这儿有个problem
                top: 0;*/
                width: 300px;
                height: 250px;
                background: url(pics/bg.jpg) no-repeat;     /*设置广告框的背景图片*/
            }
        </style>
<script type="text/javascript">
    window.onload=function(){                               //加载整个页面
        var advts = document.getElementById("advts");       //抓取元素
        var std = document.getElementsByTagName("std");
        var max_height = document.documentElement.clientHeight; //获得浏览器可视区域尺寸
        var max_width = document.documentElement.clientWidth;
        var h = max_height-advts.offsetHeight;              //获得广告窗最大left和top
        var w = max_width-advts.offsetWidth;
        var upright = 1;                                    //初始化漂浮速度
        var cross =2;
        var timer;                                      
        function run(){                                     
            var old_left = advts.style.left;                //将新值赋值给旧值,改变定位获得动态效果
            var new_left = parseInt(old_left)+cross;
            if (new_left>w) {                   //判断是否超过可视区域,true则在赋值前改为最大值,防止撑出滚动条
                new_left=w;
                alert(new_left);
            }
            if (new_left<0) {
                new_left=0;
            }
            advts.style.left = new_left+'px';
            if (new_left==w||new_left==0) {
                cross=cross*(-1);               //改变运动方向
            }
            var old_top = advts.style.top;
            var new_top = parseInt(old_top)+upright;
            if (new_top>h) {
                new_top=h;
            }
            if (new_top<0) {
                new_top=0;
            }
            advts.style.top = new_top+'px';
            if (new_top==h||new_top==0) {           
                upright=upright*(-1);
            }

        }
        timer = setInterval(run,20);            //设置定时器重复执行函数,得到漂浮效果

        advts.onmouseover=function(){           //鼠标移入事件,取消定时器,停止广告框
            clearInterval(timer);
        }
        advts.onmouseout=function(){            //鼠标移出事件,重新设置定时器,接着运动
            timer = setInterval(run,20);
        }
        std.onclick=function(){                 //鼠标点击事件,将广告框display属性修改达,到隐藏效果
            advts.style.display='none';
        }
//      advts.onclick=function(){               这个效果未能实现,将在博客末尾中说明
//          location.assign('http://bing.com');
//      }
        window.onresize=function(){             //窗口尺寸改变事件,重新计算尺寸,和初始化运动速度和方向
            advts.style.left=0;
            advts.style.top=0;
            max_height = document.documentElement.clientHeight;
            max_width = document.documentElement.clientWidth;
            h = max_height-advts.offsetHeight;
            w = max_width-advts.offsetWidth;
            upright = 1;
            cross =2;
        }
    }
</script>
    </head>
    <body>
            <div id="advts" style="left: 0;top: 0;" display='block'>  <!--设置行内(内联)样式-->
                <img src="pics/shutdown.png" class="std"/>    <!--在广告窗中加入关闭图标-->
            </div>
    </body>
</html>

曾令我不知所措的有 :

Q1 : 如何使用代码获得浏览器可视窗口?
A1 : 获得可视高度 document.documentElement.clientHeight;
获得可视宽度 document.documentElement.clientWidth;
Q2 : Q1…

依旧困扰的还有:

Q3 : 在JS中如何获取和修改除行内样式以外的CSS元素内容?(已解决)
说明: (1)element.getAttribute(“”);方法可以获取如id,class等特定和自定义属性,但是style中的如width如何获取?用setAttribute(“”,”“);方法修改内容?
(2)当前样式可用getComputedStyle(‘element’).width或element.CurrentStyle.width获取,那么如何修改呢?
Q4 : 若给广告窗口加< a >标签,或者绑定事件使其跳转(关闭图标在窗口内),那么如何实现点击关闭图标时隐藏窗口而不跳转到链
接呢?

以上内容学习参考了后盾网孙琪峥老师的公共教学资源,侵权删.

欢迎指导交流.