81 lines
1.4 KiB
PHP
81 lines
1.4 KiB
PHP
|
<?php $addr=$_SERVER['QUERY_STRING']; if ($addr=="") $addr="img/m.png"; ?>
|
||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>ImageShake</title>
|
||
|
|
<style type='text/css'>
|
||
|
|
div {
|
||
|
|
background-image:url('<?php echo $addr; ?>');
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
position:absolute;
|
||
|
|
left:0;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type='text/javascript'>
|
||
|
|
r=true
|
||
|
|
f=true
|
||
|
|
m=3
|
||
|
|
function wave() {
|
||
|
|
if (!r) {
|
||
|
|
node=d.childNodes[c]
|
||
|
|
if (f) {
|
||
|
|
node.style.top=b+i+"px"
|
||
|
|
i+=1
|
||
|
|
if (i>m) {
|
||
|
|
i=1
|
||
|
|
c+=1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
node.style.top=b+m+"px"
|
||
|
|
i=m
|
||
|
|
c+=1
|
||
|
|
}
|
||
|
|
if (c==w) {
|
||
|
|
c=0
|
||
|
|
b+=m
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (c=0; c<w; c++) {
|
||
|
|
rand=Math.floor(Math.random()*(m*2+1)+1)
|
||
|
|
if (rand==m*2+1) rand=0
|
||
|
|
if (rand>m) rand-=m*2+1
|
||
|
|
node=d.childNodes[c]
|
||
|
|
node.style.top=b+rand+"px"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
t=setTimeout("wave()",1)
|
||
|
|
}
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
addr="<?php echo $addr; ?>"
|
||
|
|
img=new Image()
|
||
|
|
img.src=addr
|
||
|
|
img.onload=function() {
|
||
|
|
w=img.width
|
||
|
|
h=img.height
|
||
|
|
|
||
|
|
d=document.body
|
||
|
|
for (i=0; i<w; i++) {
|
||
|
|
div=document.createElement("div")
|
||
|
|
div.style.clip="rect(0px,"+(i+1)+"px,"+h+"px,"+i+"px)"
|
||
|
|
if (r) div.style.top=m+"px"
|
||
|
|
div.style.width=w+"px"
|
||
|
|
div.style.height=h+"px"
|
||
|
|
d.appendChild(div)
|
||
|
|
}
|
||
|
|
if (f) i=1
|
||
|
|
else i=m
|
||
|
|
c=0
|
||
|
|
if (!r) b=0
|
||
|
|
else b=m
|
||
|
|
wave()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.onload=load
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body></body>
|
||
|
|
</html>
|