js之广告

2018-06-24 02:09:18来源：未知阅读 ()

涉及到offset等有关获取各种尺寸问题下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #ad{
        width: 300px;
        height: 200px;
        background: url(images/400.jpg) no-repeat;
        position: absolute;
        left: 0;
        top: 0;
    }
    #close{
        width: 20px;
        height: 20px;
    }
</style>
</head>
<script type="text/javascript">
    window.onload = function(){
        var ad= document.getElementById("ad");
        var close = document.getElementById("close");

        // 获得可视区域的宽高
        var  win_height = document.documentElement.clientHeight;
        var  win_width = document.documentElement.clientWidth;

        // 计算可以到达的最大top和left值
        var max_top = win_height - ad.offsetHeight;//屏幕高度减去图片高度
        var max_left = win_width - ad.offsetWidth;
        var x = 2;y = 5;//xy均为移动速度

        //设置函数控制怎么移动
        function run(){
            // 获得旧的left和top
            var old_left = ad.offsetLeft;
            var old_top = ad.offsetTop;

            // 计算新的
            var new_left = old_left + x;//加上移动速度x,y
            var new_top = old_top + y;


            // 需要判断超出，控制速度及其方向
            if (new_top>max_top) {//加速到屏幕边沿时，设置new_top = max_top;即速度为0就停下
                new_top = max_top;
            }
            if (new_left>max_left) {
                new_left = max_left;
            }
            if (new_left<0) {
                new_left = 0
            }
            if (new_top<0) {
                new_top = 0
            }
            // 赋值
            ad.style.left = new_left + 'px';
            ad.style.top = new_top + 'px';
            //当new_top = max_top;即速度为0，此时速度设为相反方向即可
            if (new_top == max_top) {
                y = -2;
            }
            if (new_top == 0) {
                y = 2;
            }
            if (new_left == max_left) {
                x = -2;
            }
            if (new_left == 0) {
                x = 2;
            }

        }


        // 设置定时器，每隔一段时间就改变一下left top
        var timer = setInterval(run,3);
        // 定时器结束

        //给ad加鼠标移入事件
        ad.onmouseover = function(){
            // 停止定时器
            clearInterval(timer)
        };

        // 给ad加鼠标移出事件
        ad.onmouseout = function(){
            //重启定时器
            timer = setInterval(run,3)
        };

        //点击关闭广告
        close.onclick = function(){
            ad.style.display = 'none';
        };

        // 窗口改变事件
        window.onresize = function(){//window.onresize = function(){....}浏览器尺寸变化响应事件
            //广告归位
            //重新将广告放到左上角
            ad.style.left = 0;
            ad.style.top = 0;
            // 将他的速度重新定义
            x = 2;
            y = 5;

            // 重新获得可视区域的宽高
            win_height = document.documentElement.clientHeight;
            win_width = document.documentElement.clientWidth;

            // 重新计算可以到达的最大top和left值
            max_top = win_height - ad.offsetHeight;
            max_left = win_width - ad.offsetWidth;
        }
    }
</script>
<body>
<div id="ad">
    <img src="images/X.jpg" id="close">
</div>
</body>
</html>