<html> <head> <meta charset="UTF-8"> <title>ZG·Dragon</title> <style> #div1{ position:relative; width:899px; height:599px; margin:0 auto; border:1px solid black; background-color:#eeff66; } #img{ position:relative; width:100; height:100; background-color:white; border-radius:20%; box-shadow:5px 5px 0px 0px RGBA(0,0,0,0.4); } </style> <script> var img=document.getElementById("img"); var x=0,y=0; var t; var f; var xSpeed=1.2; var ySpeed=1.2; function floatimg(){ var o=document.getElementById('div1'); var w=o.clientWidth*0.88+2; var h=o.clientHeight*0.82+2; if(x>=w){ t=1; //document.getElementById("img").style.boxShadow="0px 0px 0px 0px black"; } /*else{ document.getElementById("img").style.boxShadow="4px 4px 0px 0px RGBA(0,0,0,0.4)"; }*/ if(x<=0){ t=0; } if(t==1){ x-=xSpeed; } if(t==0){ x+=xSpeed; } if(y>=h){ f=1; } if(y<=0){ f=0; } if(f==1){ y-=ySpeed; } if(f==0){ y+=ySpeed; } document.getElementById("img").style.left=x+"px"; document.getElementById("img").style.top=y+"px"; setTimeout(floatimg,10); } </script> </head> <body onload="floatimg()"> <div id="div1"> <img src="0000.jpg" id="img" alt="图片"> </div> </body> </html>
可以实现一个简单的浮动的小窗体