<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JS绚丽特效</title>
<style type="text/css">
body,div,span,img{margin:0;padding:0;font-family: georgia,airal;font-size:12px;color:#fff;}
body{background:black;}
#screen span{border:1px #fff solid;overflow:hidden;
position:absolute;width:93px;height:68px;}
#screen img{cursor:pointer;position:absolute;}
</style>
</head>
<body>
<div id="screen" style="width:420px;height:320px;position:relative;top:50px;left:300px;">
<span><img src="images/im1.jpg" alt="1"/></span>
<span><img src="images/im2.jpg" alt="2"/></span>
<span><img src="images/im3.jpg" alt="3"/></span>
<span><img src="images/im4.jpg" alt="4"/></span>
<span><img src="images/im5.jpg" alt="5"/></span>
<span><img src="images/im6.jpg" alt="6"/></span>
<span><img src="images/im7.jpg" alt="7"/></span>
<span><img src="images/im8.jpg" alt="8"/></span>
<span><img src="images/im9.jpg" alt="9"/></span>
<span><img src="images/im10.jpg" alt="10"/></span>
<span><img src="images/im11.jpg" alt="11"/></span>
<span><img src="images/im12.jpg" alt="12"/></span>
<span><img src="images/im13.jpg" alt="13"/></span>
<span><img src="images/im14.jpg" alt="14"/></span>
<span><img src="images/im15.jpg" alt="15"/></span>
<span><img src="images/im16.jpg" alt="16"/></span>
</div>
<script type="text/javascript">
window.onload=function(){
load(); //执行此函数。
}
var obj=[];
var scr;
var spa;
var img;
var W;
var Wi;
var Hi;
var wi;
var hi;
var Sx;
var Sy;
var M;
var xm;
var ym;
var xb=0;
var yb=0;
var ob=-1;
var cl=false;
px=function(x){
return Math.round(x)+"px";
}
img_center=function(o){
with(img[o]){
style.left=px(-(width-Wi)/2);
style.top=px(-(height-Hi)/2);
}
}
var Nx=4; //size grid x
var Ny=4; //size grid y
var Tx=3; // image width
var Ty=3; // image height
var Mg=40; // margin
var SP=1; // speed
function Cobj(o,x,y){
this.o=o;
this.ix=Math.min(Nx-Tx,Math.max(0,Math.round(x-(Tx/2))));
this.iy=Math.min(Ny-Ty,Math.max(0,Math.round(y-(Ty/2))));
this.li=((this.ix*M+this.ix*Sx)-(x*M+x*Sx))/SP;
this.ti=((this.iy*M+this.iy*Sy)-(y*M+y*Sy))/SP;
this.l=0;
this.t=0;
this.w=0;
this.h=0;
this.s=0;
this.mv=false;
this.spa=spa[o].style;
this.img=img[o];
this.txt=img[o].alt;
img[o].alt="";
this.zoom=function(){
with(this){
l+=li*s;
t+=ti*s;
w+=wi*s;
h+=hi*s;
if ((s>0 && w<Wi)||(s<0 && w>Sx)){
window.focus();
setTimeout("obj["+o + "].zoom()", 16);
}else{
mv=false;
if(s>0){
l=ix*M+ix*Sx;
t=iy*M+iy*Sy;
w=Wi;
h=Hi;
}else{
l=x*M+x*Sx;
t=y*M+y*Sy;
w=Sx;
h=Sy;
}
}
with(spa){
left=px(l);
top=px(t);
width=px(w);
height=px(h);
zIndex=Math.round(w);
}
}
}
this.click=function(){
with(this){
img_center(o);
if( ! mv||cl){
if(s>0){
if(cl||Math.abs(xm-xb)>Sx*.4||Math.abs(ym-yb)>Sy*.4){
s=-2;
mv=true;
zoom();
}
}else{
if(cl||ob!=o){
if (ob>=0){
with(obj[ob]){
s=-2;
mv=true;
zoom();
}
}
ob=o;
s=1;
xb=xm;
yb=ym;
mv=true;
zoom();
}
}
}
}
}
img[o].onmouseover=img[o].onmousemove=img[o].onmouseout=new Function("cl=false;obj["+o+"].click()");
img[o].onclick=new Function("cl=true;obj["+o+"].click()");
img[o].onload=new Function("img_center("+o+")");
this.zoom();
}
document.onmousemove=function(e){
if (!e){
e=window.event;
}
xm=(e.x||e.clientX);
ym=(e.y||e.clientY);
}
function load(){
scr=document.getElementById("screen");
spa=scr.getElementsByTagName("span");
img=scr.getElementsByTagName("img");
W=parseInt(scr.style.width);
H=parseInt(scr.style.height);
M=W/Mg;
Sx=(W-(Nx-1)*M)/Nx;
Sy=(H-(Ny-1)*M)/Ny;
Wi=Tx*Sx+(Tx-1)*M;
Hi=Ty*Sy+(Ty-1)*M;
SP=M*Tx*SP;
wi=(Wi-Sx)/SP;
hi=(Hi-Sy)/SP;
for (k=0,i=0;i<Nx;i++){
for (j=0;j<Ny;j++){
obj[k]=new Cobj(k++,i,j);
}
}
}
</script>
</body>
</html>
JS动态特效.rar （18个子文件） 
JS动态特效 
第五次修改.html 4KB images 
im11.jpg 48KB im13.jpg 33KB im2.jpg 31KB im12.jpg 35KB im3.jpg 36KB im10.jpg 31KB im8.jpg 35KB im4.jpg 43KB im7.jpg 33KB im14.jpg 46KB
Thumbs.db 60KB im16.jpg 23KB im5.jpg 37KB im6.jpg 35KB im1.jpg 30KB im15.jpg 36KB im9.jpg 44KB资源评论
疯狂代码2012-06-21这个效果比较适合影楼网站使用哦
