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

1.功能(鼠標(biāo)移入移出事件、點擊事件、定時器控制移動)
div實現(xiàn)在頁面上移動,并判斷碰到頁面邊框反彈,鼠標(biāo)移入div停止移動,鼠標(biāo)移出div進(jìn)行移動,點擊div讓它從頁面消失,定時器控制它的移動。
2.div初始樣式設(shè)置
//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"
//設(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.點擊事件點擊讓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"
? ? ? ? //設(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);
? ? ? ? }
? ? ? ? //點擊事件,點擊后消失
? ? ? ? div1.onclick = function(){
? ? ? ? ? ? div1.style.display = "none"
? ? ? ? }?
? ? </script>到此這篇關(guān)于基于JS實現(xiàn)彈性漂浮廣告的示例代碼的文章就介紹到這了,更多相關(guān)JS彈性漂浮廣告內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能
這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能,本文通過實例代碼給大家分享實現(xiàn)思路,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
Javascript基礎(chǔ)知識盲點總結(jié)之函數(shù)
函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊。這篇文章主要介紹了Javascript基礎(chǔ)知識盲點總結(jié)之函數(shù)的相關(guān)資料2016-05-05
利用js實現(xiàn)前臺動態(tài)添加文本框,后臺獲取文本框內(nèi)容(示例代碼)
這篇文章主要是對利用js實現(xiàn)前臺動態(tài)添加文本框,后臺獲取文本框內(nèi)容的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11

