This article describes the simple image floating effect implemented by js. Share it for your reference, as follows:
Using window objects to achieve a floating effect of an image
1. There is an advertising div that we want to control, its starting point (0,0)
2. Set the horizontal and vertical speeds
3. Control ad div mobile
1) Whether the ad div reaches the boundary
2) If we reach the boundary, we set the speed to move in reverse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Unt titled document</title><style>div{ position:absolute;}img{ position:absolute; filter:alpha(opacity=100);/* IE */ -moz-opacity:1;/* Moz + FF */ opacity: 1;/* Browsers that support CSS3 (FF 1.5 also supports)*/}</style></head><body><div id="divimg"><img src="123.jpg"></div><script language="JavaScript" type="text/javascript"> //Get the div object where the picture is var img=document.getElementById("divimg"); //Set the coordinates of the upper left corner of the div, the coordinates of the starting point var x=10,y=10; //Set the travel speed of the picture var xSpeed=2,ySpeed=1; //Set the maximum floating height and width of the picture var w=document.documentElement.clientWidth-110,h=document.documentElement.clientHeight-160; function floatimg(){ //Compare whether the picture disk reaches the boundary//If we reach the boundary, we control the image to change direction if(x>w||x<0){ xSpeed= -xSpeed; } if(y>h||y<0){ ySpeed= -ySpeed; } //If the boundary is not reached, set the coordinates of the upper left corner of the picture //Set the coordinate value starting coordinate + speed x+=xSpeed; y+=ySpeed; img.style.top=y+"px"; img.style.left=x+"px"; //Delay call the function floatimg(), and call setTimeout("floatimg()"),40); } floatimg();</script></body></html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.