溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

基于JS實現(xiàn)彈性漂浮廣告的示例代碼怎么寫

發(fā)布時間：2022-01-17 14:05:47 來源：億速云 閱讀：141 作者：kk 欄目：開發(fā)技術(shù)


這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)基于JS實現(xiàn)彈性漂浮廣告的示例代碼怎么寫，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

效果圖

基于JS實現(xiàn)彈性漂浮廣告的示例代碼怎么寫

1.功能（鼠標(biāo)移入移出事件、點(diǎn)擊事件、定時器控制移動）

div實現(xiàn)在頁面上移動，并判斷碰到頁面邊框反彈，鼠標(biāo)移入div停止移動，鼠標(biāo)移出div進(jìn)行移動，點(diǎn)擊div讓它從頁面消失，定時器控制它的移動。

2.div初始樣式設(shè)置

        //div（廣告）獲取節(jié)點(diǎn)
        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"
        //設(shè)置定位
        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可以移動的頁面大小

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

4.定時器控制移動，鼠標(biāo)移入事件停止移動，鼠標(biāo)移出繼續(xù)移動。

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

5.點(diǎn)擊事件點(diǎn)擊讓div消失

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

6.完整代碼

<div id="div1">  </div>
<body>
    <script>
        //div（廣告）獲取節(jié)點(diǎn)
        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"
        //設(shè)置定位
        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"
        
        //網(wǎng)頁可視化寬高--div(廣告)可以移動的區(qū)域
        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)
            //大于可移動的高度或到達(dá)頂部 就讓移動的距離變?yōu)樗呢?fù)數(shù)
            if(offsety>=maxTop||offsety<=0){
                stepy = -stepy;
            }
            //大于可移動的寬度或到達(dá)最左 就讓移動的距離變?yōu)樗呢?fù)數(shù)
            if(offsetx>=maxLeft||offsetx<=0){
                stepx=-stepx;
            }
            //div定位的位置
            div1.style.top = offsety+"px"
            div1.style.left = offsetx+"px"
        }
        //啟動定時器
        var t= setInterval(move,30);
        //鼠標(biāo)移入清除定時器
        div1.onmouseenter = function(){
            clearInterval(t);
        }
        //鼠標(biāo)移出恢復(fù)
        div1.onmouseleave = function(){
            t = setInterval(move,30);
        }
        //點(diǎn)擊事件，點(diǎn)擊后消失
        div1.onclick = function(){
            div1.style.display = "none"
        } 
    </script>

JavaScript是什么
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

上述就是小編為大家分享的基于JS實現(xiàn)彈性漂浮廣告的示例代碼怎么寫了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手