基於JS實現彈性漂浮廣告的示例代碼

Posted on by

效果圖

1.功能（鼠標移入移出事件、點擊事件、定時器控制移動）

div實現在頁面上移動，並判斷碰到頁面邊框反彈，鼠標移入div停止移動，鼠標移出div進行移動，點擊div讓它從頁面消失，定時器控制它的移動。

2.div初始樣式設置

        //div（廣告）獲取節點
        var div1 = document.getElementById("div1");
        // div(廣告)初始的位置
        var offsetx = 0;
        var offsety = 0;
        //div(廣告)每次移動的距離
        var stepx = 10;
        var stepy = 10;
        //div(廣告)的大小
        div1.style.width="100px"
        div1.style.height="100px"
        //設置定位
        div1.style.position="absolute"
        div1.style.top = offsetx;
        div1.style.left = offsety;
        //廣告圖片
        div1.style.backgroundImage="url(./img/ggao.webp)"
        div1.style.backgroundSize="cover"

3.獲取div可以移動的頁面大小

        //網頁可視化寬高--div(廣告)可以移動的區域
        var seeWidth = document.documentElement.clientWidth;
        var seeHeight = document.documentElement.clientHeight;
        //div(廣告)最大可移動的寬度、高度
        var maxLeft = seeWidth -100;
        var maxTop = seeHeight -100;

4.定時器控制移動，鼠標移入事件停止移動，鼠標移出繼續移動。

//啟動定時器
        var t= setInterval(move,30);
        //鼠標移入清除定時器
        div1.onmouseenter = function(){
            clearInterval(t);
        }
        //鼠標移出恢復
        div1.onmouseleave = function(){
            t = setInterval(move,30);
        }

5.點擊事件點擊讓div消失

 //點擊事件，點擊後消失
        div1.onclick = function(){
            div1.style.display = "none"
        } 

6.完整代碼

<div id="div1">  </div>
<body>
    <script>
        //div（廣告）獲取節點
        var div1 = document.getElementById("div1");
        // div(廣告)初始的位置
        var offsetx = 0;
        var offsety = 0;
        //div(廣告)每次移動的距離
        var stepx = 10;
        var stepy = 10;
        //div(廣告)的大小
        div1.style.width="100px"
        div1.style.height="100px"
        //設置定位
        div1.style.position="absolute"
        div1.style.top = offsetx;
        div1.style.left = offsety;
        // div1.style.backgroundColor="black"
        div1.style.backgroundImage="url(./img/ggao.webp)"
        div1.style.backgroundSize="cover"
        
        //網頁可視化寬高--div(廣告)可以移動的區域
        var seeWidth = document.documentElement.clientWidth;
        var seeHeight = document.documentElement.clientHeight;
        //div(廣告)最大可移動的寬度、高度
        var maxLeft = seeWidth -100;
        var maxTop = seeHeight -100;
        function move(){
            offsetx+=stepx;
            offsety+=stepy;
            console.log(offsetx);
            console.log(offsety)
            //大於可移動的高度或到達頂部 就讓移動的距離變為它的負數
            if(offsety>=maxTop||offsety<=0){
                stepy = -stepy;
            }
            //大於可移動的寬度或到達最左 就讓移動的距離變為它的負數
            if(offsetx>=maxLeft||offsetx<=0){
                stepx=-stepx;
            }
            //div定位的位置
            div1.style.top = offsety+"px"
            div1.style.left = offsetx+"px"
        }
        //啟動定時器
        var t= setInterval(move,30);
        //鼠標移入清除定時器
        div1.onmouseenter = function(){
            clearInterval(t);
        }
        //鼠標移出恢復
        div1.onmouseleave = function(){
            t = setInterval(move,30);
        }
        //點擊事件，點擊後消失
        div1.onclick = function(){
            div1.style.display = "none"
        } 
    </script>

到此這篇關於基於JS實現彈性漂浮廣告的示例代碼的文章就介紹到這瞭,更多相關JS彈性漂浮廣告內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：