如何使用js實現(xiàn)圖片漂浮效果

發(fā)布時間：2022-02-28 14:55:25 來源：億速云閱讀：293 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何使用js實現(xiàn)圖片漂浮效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

當鼠標在圖片上方時，圖片停止漂浮，點擊關(guān)閉按鈕可隱藏圖片。

<body>

</div>

var xPos=0;

var yPos=0;

var directionX=true;

var directionY=true;

var step=1;

var speed=1;

var float=document.getElementById("float");

function move(){

var height=document.documentElement.clientHeight;

var width=document.documentElement.clientWidth;

var imgHeight=float.offsetHeight;

var imgWidth=float.offsetWidth;

float.style.left=xPos+document.documentElement.scrollLeft+"px";

float.style.top=yPos+document.documentElement.scrollTop+"px";

if(directionX){xPos=xPos+step;}else{xPos=xPos-step;}

if(xPos<=0){xPos=0;directionX=true;}

if(xPos>=width-imgWidth){xPos=width-imgWidth;directionX=false;}

if(directionY){yPos=yPos+step;}else{yPos=yPos-step;}

if(yPos<=0){yPos=0;directionY=true;}

if(yPos>=height-imgHeight){yPos=height-imgHeight;directionY=false;}

t=setTimeout(move,speed);

}

float.onmouseover=function(){clearTimeout(t);}

float.onmouseout=function(){t=setTimeout("move()",speed);}

window.onload=move();

</script>

</body>

感謝各位的閱讀！關(guān)于“如何使用js實現(xiàn)圖片漂浮效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

猜你喜歡