很酷的JavaScript图片放大效果

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

很酷的JavaScript图片放大效果

标签：图片放大幻灯　时间：2009-01-13　已阅读：
非常酷的一个JavaScript图片放大效果，不信就运行一下试试，相信你会喜欢的。

<html>
<head>
<title>JS图片放大特效</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {
background: #000;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#screen span {
position:absolute;
overflow:hidden;
border:#FFF solid 1px;
background:#FFF;
}
#screen img{
position:absolute;
left:-32px;
top:-32px;
cursor: pointer;
}
#caption, #title{
color: #FFF;
font-family: georgia, 'times new roman', times, veronica, serif;
font-size: 1em;
text-align: center;
}
#caption b {
font-size: 2em;
}
</style>
<script type="text/javascript"><!--
window.onerror = new Function("return true");
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();
    /* loop */
    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();
      cap.innerHTML = txt;
     }
    }
    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();
      cap.innerHTML = txt;
     }
    }
   }
  }
 }
 
 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");
 cap = document.getElementById("caption");
 
document.getElementById("border").onmouseover = function()
 {
  cl = true;
  if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
  ob = -1;
 }

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></head><body>
<div style="position: absolute; left: 50%; top: 50%;">
<div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div>
<div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div>
<div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" alt=""></span>
<span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" alt=""></span>
<span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" alt=""></span>
<span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" alt=""></span>
<span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" alt=""></span>
<span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" alt=""></span>
<span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" alt=""></span>
<span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" alt=""></span>
<span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" alt=""></span>
<span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" alt=""></span>
<span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" alt=""></span>
<span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" alt=""></span>
<span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" alt=""></span>
<span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" alt=""></span>
<span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" alt=""></span>
<span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" alt=""></span>
</div>
<div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

很酷的JavaScript图片放大效果

本类推荐代码

本类阅读排行

最新源码下载