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

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

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

效果圖

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

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

2.div初始樣式設置

        //div（廣告）獲取節(jié)點
        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可以移動的頁面大小

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

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

//啟動定時器
? ? ? ? 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（廣告）獲取節(jié)點
? ? ? ? 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"
? ? ? ??
? ? ? ? //網(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)
? ? ? ? ? ? //大于可移動的高度或到達頂部 就讓移動的距離變?yōu)樗呢摂?shù)
? ? ? ? ? ? if(offsety>=maxTop||offsety<=0){
? ? ? ? ? ? ? ? stepy = -stepy;
? ? ? ? ? ? }
? ? ? ? ? ? //大于可移動的寬度或到達最左 就讓移動的距離變?yōu)樗呢摂?shù)
? ? ? ? ? ? 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實現(xiàn)彈性漂浮廣告的示例代碼的文章就介紹到這了,更多相關JS彈性漂浮廣告內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: