基於JS實現彈性漂浮廣告的示例程式碼
阿新 • • 發佈：2022-01-19
目錄
- 效果圖
- 1.功能（滑鼠移入移出事件、點選事件、定時器控制移動）
- 2.div初始樣式設定
- 3.獲取div可以移動的頁面大小
- 4.定時器控制移動，滑鼠移入事件停止移動，滑鼠移出繼續移動。
- 5.點選事件點選讓div消失
- 6.完整程式碼
效果www.cppcns.com圖
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"
3.獲取div可以移動的頁面大小
//視覺化寬高--div(廣告)可以移動的區域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(廣告)最大http://www.cppcns.com可移動的寬度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100;
4.定時器控制移動，滑鼠移入事件停止移動，滑鼠移出繼續移動。
//啟動定時器
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（廣告）獲取節點
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.stwww.cppcns.comyle.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.onclick = function(){
div1.style.display = "none"
}
</script>
到此這篇關於基於實現彈性漂浮廣告的示例程式碼的文章就介紹到這了,更多相關JS彈性漂浮廣告內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！