<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>
可以实现一个简单的浮动的小窗体