广告框页面随意滚动特效

1.先给广告框一个绝对定位，设置left，top的值,给出广告在页面中的位置

<div id="ad" style="position:absolute;left:10px;top:10px;">
        <img src="guanggao.jpg" alt="">
</div>

2.获取元素

var ad = document.getElementById('ad');

3.定义所需要的全局变量

var vx = -1; 设置水平方向
var vy = -1;设置垂直方向
var xh = null; 设置循环变量

4.给广告框定义事件

(1)让广告在页面加载完成之后运动，设置window.onload或者定义地执行函数,定义一个start函数并且调用
    window.onload = function(){  …… }
    (function(){ …… })();
(2) 当鼠标经过让广告框暂停
    ad.onmouoseover = stop;
(3) 当鼠标经过后鼠标离开时让广告框继续运动
    ad.onmouseover = start;
(4) 当鼠标点击时，让广告框消失
    ad.onclick = hide;

5.start函数：

(1) 定义一个计数器函数 setInterval
(2) 获取可视窗口的宽高
    var win_x = window.innerWidth?window.innerWidth:document.documentElement.clientWidth;
    var win_y = window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
(3)获取广告框距离浏览器左边以及上边的距离，由于gg.style.left获取的是类似与100px的值，需要parseInt函数使其只显示数字
    var x =parseInt( gg.style.left);
    var y = parseInt(gg.style.top);
(4) 判断条件
    i. 当广告框到达底部或从底部到达顶部的时候，让其垂直运动方向改变
        if(y<0){ vy = -vy; }
        if(y>(win_y-广告框的高度)){ vy = -vy; }
    ii. 当广告框碰到右边或从右边到达左边的时候，让其水平方向改变
        if(x<0){ vx = -vx; }
        if(x>(win_x-广告框的宽度)){ vx = -vx; }
(5) 重新赋值
    y = y - vy;
    x = x - vx;
    gg.style.left = x + 'px';
    gg.style.top = y + 'px';

6.stop函数

清除循环函数 clearInterval(xh);

7.hide函数

 清除循环函数 clearInterval(xh);
 设置广告框display样式为none    gg.style.display = 'none';

8.js代码

window.onload = function(){  
    var gg = document.getElementById('gg');
    gg.onmouseover = stop;
    gg.onmouseout = start;
    gg.onclick = hide;      
    var vx = -1,vy = -1, xh = null;
    function start(){
        xh = setInterval(function(){
            var win_w = window.innerWidth?window.innerWidth:document.documentElement.clientWidth;
            var win_h = window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
            var x = parseInt(gg.style.left);
            var y = parseInt(gg.style.top);                     
            if(y > (win_h-100)){
                vy=-vy;
            }
            if(y < 0){
                vy = -vy;
            }
            if(x > (win_w - 100)){
                vx = -vx;
            }
            if(x < 0){
                vx = -vx;
            }
            y = y - vy;
            x = x - vx;
            gg.style.left = x + 'px';
            gg.style.top = y + 'px';
        },10);
    }
    start();
    function stop(){
        clearInterval(xh);
    }
    function hide(){
        clearInterval(xh);
        gg.style.display = 'none';
    }
}