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

更新時(shí)間：2022年01月17日 12:03:08 作者：土豆切成絲

這篇文章主要介紹了利用JS實(shí)現(xiàn)彈性漂浮效果的廣告代碼,文中的示例代碼講解詳細(xì),具有一定參考借鑒價(jià)值,感興趣的同學(xué)可以跟隨小編一起試一試

效果圖
1.功能（鼠標(biāo)移入移出事件、點(diǎn)擊事件、定時(shí)器控制移動(dòng)）
2.div初始樣式設(shè)置
3.獲取div可以移動(dòng)的頁(yè)面大小
4.定時(shí)器控制移動(dòng)，鼠標(biāo)移入事件停止移動(dòng)，鼠標(biāo)移出繼續(xù)移動(dòng)。
5.點(diǎn)擊事件點(diǎn)擊讓div消失
6.完整代碼

效果圖

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

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

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

        //div（廣告）獲取節(jié)點(diǎn)
        var div1 = document.getElementById("div1");
        // div(廣告)初始的位置
        var offsetx = 0;
        var offsety = 0;
        //div(廣告)每次移動(dòng)的距離
        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可以移動(dòng)的頁(yè)面大小

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

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

//啟動(dòng)定時(shí)器
? ? ? ? var t= setInterval(move,30);
? ? ? ? //鼠標(biāo)移入清除定時(shí)器
? ? ? ? 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(廣告)每次移動(dòng)的距離
? ? ? ? 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)頁(yè)可視化寬高--div(廣告)可以移動(dòng)的區(qū)域
? ? ? ? var seeWidth = document.documentElement.clientWidth;
? ? ? ? var seeHeight = document.documentElement.clientHeight;
? ? ? ? //div(廣告)最大可移動(dòng)的寬度、高度
? ? ? ? var maxLeft = seeWidth -100;
? ? ? ? var maxTop = seeHeight -100;
? ? ? ? function move(){
? ? ? ? ? ? offsetx+=stepx;
? ? ? ? ? ? offsety+=stepy;
? ? ? ? ? ? console.log(offsetx);
? ? ? ? ? ? console.log(offsety)
? ? ? ? ? ? //大于可移動(dòng)的高度或到達(dá)頂部 就讓移動(dòng)的距離變?yōu)樗呢?fù)數(shù)
? ? ? ? ? ? if(offsety>=maxTop||offsety<=0){
? ? ? ? ? ? ? ? stepy = -stepy;
? ? ? ? ? ? }
? ? ? ? ? ? //大于可移動(dòng)的寬度或到達(dá)最左 就讓移動(dòng)的距離變?yōu)樗呢?fù)數(shù)
? ? ? ? ? ? if(offsetx>=maxLeft||offsetx<=0){
? ? ? ? ? ? ? ? stepx=-stepx;
? ? ? ? ? ? }
? ? ? ? ? ? //div定位的位置
? ? ? ? ? ? div1.style.top = offsety+"px"
? ? ? ? ? ? div1.style.left = offsetx+"px"
? ? ? ? }
? ? ? ? //啟動(dòng)定時(shí)器
? ? ? ? var t= setInterval(move,30);
? ? ? ? //鼠標(biāo)移入清除定時(shí)器
? ? ? ? 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>

到此這篇關(guān)于基于JS實(shí)現(xiàn)彈性漂浮廣告的示例代碼的文章就介紹到這了,更多相關(guān)JS彈性漂浮廣告內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: