原生JS實現漂浮廣告的一種方法(Demo)

阿新 • • 發佈：2019-01-20

實現效果 : 開啟網頁後,廣告窗從指定位置開始在頁面漂浮,當滑鼠移入時視窗暫停運動,滑鼠移出後,視窗在暫停處按原運動軌跡運動,視窗可關閉.

思路 : 實現運動效果需要依託定位屬性,使用定時器重複執行程式碼改變定位,獲得漂浮效果;設定不同的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 >標籤,或者繫結事件使其跳轉(關閉圖示在視窗內),那麼如何實現點選關閉圖示時隱藏視窗而不跳轉到鏈
接呢?

以上內容學習參考了後盾網孫琪崢老師的公共教學資源,侵權刪.

歡迎指導交流.

原生JS實現漂浮廣告的一種方法(Demo)

冷風吹醒(手動實驗) :

原生JS實現漂浮廣告的一種方法(Demo)

Python爬蟲處理JS翻頁的一種方法，利用Ajax非同步請求

Python實現"用佇列實現棧"的一種方法

用node.js實現ORM的一種思路

js 合併陣列的一種方法

原生JS去重（一）--兩種方法去掉重複字元

（一）原生JS實現判斷碰撞的方法！

原生js實現outerWidth()方法，用到getComputedStyle

JS實現數組去重方法總結(極速PC蛋蛋六種方法)

原生Js實現複製功能的方法總結，execCommand和clipboardData的使用

原生Js實現複製(Copy)的方法總結:execCommand和clipboardData的使用

Python實現"階乘後的零"的一種方法

Python實現"旋轉陣列"的一種方法

Python實現"快樂的數"的一種方法

使用思事標籤，實現包含GTD模式的一種方法

Python實現"醜數"的一種方法

一、多執行緒基礎概念、實現執行緒三種方法、中斷執行緒方法，以及執行緒狀態轉化

Ｐython實現"二進位制手錶"的一種方法

C#-一種方法工廠的實現

五種js實現陣列去重的方法

原生JS實現漂浮廣告的一種方法(Demo)

冷風吹醒(手動實驗) :

相關推薦