目錄
彈性懸浮廣告效果圖
1.功能（滑鼠移入移出事件、點擊事件、定時器控制移動）
2.div初始樣式設定
2.獲取div可以移動的頁面大小
3.定時器控制移動，滑鼠移入事件停止移動，滑鼠移出繼續移動，
4.點擊事件點擊讓div消失
5.實作懸浮廣告的完整代碼
彈性懸浮廣告效果圖
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"2.獲取div可以移動的頁面大小
//網頁可視化寬高--div(廣告)可以移動的區域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(廣告)最大可移動的寬度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100;3.定時器控制移動，滑鼠移入事件停止移動，滑鼠移出繼續移動，
//啟動定時器
var t= setInterval(move,30);
//滑鼠移入清除定時器
div1.onmouseenter = function(){
clearInterval(t);
}
//滑鼠移出恢復
div1.onmouseleave = function(){
t = setInterval(move,30);
}4.點擊事件點擊讓div消失
//點擊事件，點擊后消失
div1.onclick = function(){
div1.style.display = "none"
} 5.實作懸浮廣告的完整代碼
<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>這個記錄下來為了方便以后使用的方便，也希望大佬們多多交流，多多留言，指出我的不足的之處啦！
有需要的小伙伴可以研究研究啦！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413465.html
標籤：其他