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

来源：互联网发布：淘宝整点秒杀怎么设置编辑：程序博客网时间：2024/05/01 00:27

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

思路 : 实现运动效果需要依托定位属性,使用定时器重复执行代码改变定位,获得漂浮效果;设定不同的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 >标签,或者绑定事件使其跳转(关闭图标在窗口内),那么如何实现点击关闭图标时隐藏窗口而不跳转到链
接呢?

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

欢迎指导交流.

0 0