js之廣告

時間 2019-11-11
原文原文鏈接
涉及到offset等有關獲取各類尺寸問題下javascript
<!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>
次總結html
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。