這期內容當中小編將會給大家帶來有關基于JS實現彈性漂浮廣告的示例代碼怎么寫，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
div實現在頁面上移動，并判斷碰到頁面邊框反彈，鼠標移入div停止移動，鼠標移出div進行移動，點擊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"//網頁可視化寬高--div(廣告)可以移動的區域 var seeWidth = document.documentElement.clientWidth; var seeHeight = document.documentElement.clientHeight; //div(廣告)最大可移動的寬度、高度 var maxLeft = seeWidth -100; var maxTop = seeHeight -100;
//啟動定時器
var t= setInterval(move,30);
//鼠標移入清除定時器
div1.onmouseenter = function(){
clearInterval(t);
}
//鼠標移出恢復
div1.onmouseleave = function(){
t = setInterval(move,30);
} //點擊事件，點擊后消失
div1.onclick = function(){
div1.style.display = "none"
}<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>JavaScript是什么
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
上述就是小編為大家分享的基于JS實現彈性漂浮廣告的示例代碼怎么寫了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
