How to use js to achieve picture floating effect

This article is about how to use js to achieve image floating effect. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

When the mouse is over the picture, the picture stops floating. Click the close button to hide the picture.

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=width-imgWidth) {xPos=width-imgWidth;directionX=false;}

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

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 ()

Thank you for reading! This is the end of this article on "how to use js to achieve picture floating effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!