非常炫的图片特效，响应鼠标变化

时间：2014-06-08 15:18 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>非常炫的图片特效，响应鼠标</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #222;
position: absolute;
width: 100%;
height: 100%;
}
#screen {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
#pan {
position: absolute;
height: 150%;
width: 150%;
padding: 5%;
}
#screen .frame {
position: relative;
float: left;
width: 29%;
height: 27%;
margin: 2%;
background: #000;
overflow: hidden;
}
#screen .slider {
position: absolute;
width: 100%;
height: 100%;
background: #222;
z-index: 1000;
}
#pan img {
position: absolute;
visibility: hidden;
}
#pan .legend {
position: absolute;
bottom: 0px;
font-size: 1em;
color: #FFF;
width: 2000px;
font-family: arial;
font-weight: bold;
}
</style>
<script type="text/javascript">
var xm = 0;
var ym = 0;
sP = {
 cx : 0,
 cy : 0,
 N  : 0,
 R  : [],
 I  : [],
 C  : [],
 L  : [],
 Id : 0,

init : function ()
 {
  this.scr = document.getElementById('screen');
  this.pan = document.getElementById('pan');
  this.div = this.pan.getElementsByTagName('div');
  this.scr.onselectstart = function () { return false; }
  this.scr.ondrag        = function () { return false; }
  for (var i = 0, o; o = this.div[i]; i++)
  {
   if (o.className == 'frame')
   {
    o.l = document.createElement('div');
    o.l.className = 'legend';
    o.appendChild(o.l);
    o.r = document.createElement('div');
    o.r.className = 'slider';
    o.appendChild(o.r);
    o.r.x = 0;
    o.r.l = o.l;
    o.r.p = 0;
    o.r.s = 2;
    o.r.m = false;
    o.img = o.r.img = o.getElementsByTagName('img')[0];
    o.r.c = Math.random() * 100;
    o.r.o = o;
    sP.R[sP.N] = o.r;
    sP.I[sP.N] = o.img.src;
    sP.L[sP.N] = o.title;
    o.title = "";
    sP.N++;
    o.r.onmouseover = function ()
    {
     if (!this.m && this.img.complete)
     {
      if (sP.O != this && !this.n)
      {
       this.x = this.o.offsetWidth;
       this.l.innerHTML = sP.L[sP.Id];
       this.img.src = sP.I[sP.Id];
       this.resize();
       this.n = true;
       if(++sP.Id >= sP.N)
       {
        sP.Id = 0;
        for (var i = 0, o; o = sP.R[i]; i++) o.n = false;
       }
      }
      if (sP.O)
      {
       sP.O.s = 2;
       sP.C.push(sP.O);
      }
      this.m = true;
      sP.O = this;
      sP.Or = this;
     }
    }
    o.r.resize = function ()
    {
     var i = new Image();
     i.src = this.img.src;
     this.img.style.width  = (i.width  < this.offsetWidth) ? Math.round(this.offsetWidth  * 1.25) + 'px' : Math.round(i.width) + 'px';
     this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';
     this.w = (this.img.offsetWidth  - this.offsetWidth)  * .5;
     this.h = (this.img.offsetHeight - this.offsetHeight) * .5;
     this.img.style.visibility = 'visible';
    }
   }
  }
  sP.resize();
  sP.run();
 },

resize : function () {
  var o = sP.scr;
  sP.nw = o.offsetWidth;
  sP.nh = o.offsetHeight;
  sP.iw = sP.pan.offsetWidth;
  sP.ih = sP.pan.offsetHeight;
  for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent)
  {
   sP.nx += o.offsetLeft;
   sP.ny += o.offsetTop;
  }
  for (var i = 0, o; o = sP.R[i]; i++) o.resize();
 },

run : function ()
 {
  sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1;
  sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1;
  sP.pan.style.left = Math.round(sP.cx) + 'px';
  sP.pan.style.top  = Math.round(sP.cy) + 'px';
  if(sP.O) {
   sP.O.c += .015;
   sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px';
   sP.O.img.style.top  = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';
   sP.O.l.style.left = Math.round(sP.O.x--) + 'px';
  }

if (sP.Or)
  {
   sP.Or.p -= sP.Or.s;
   sP.Or.s *= 1.1;
   if (sP.Or.p < -sP.Or.offsetHeight)
   {
    sP.Or.p = -sP.Or.offsetHeight;
    sP.Or.s = 2;
    sP.Or.m = false;
    sP.Or = false;
   }
   sP.O.style.top = Math.round(sP.O.p) + 'px';
  }

for (var i = 0, c; c = sP.C[i]; i++)
  {
   if (c != sP.Or)
   {
    c.p += c.s;
    c.s *= 1.2;
    if (c.p >= 0)
    {
     c.p = 0;
     c.s = 2;
     c.m = false;
     sP.C.splice(i, 1);
    }
    c.style.top = Math.round(c.p) + 'px';
   } else {
    c.s = 2;
    c.m = false;
    sP.C.splice(i, 1);
   }
  }
  setTimeout(sP.run, 16);
 }
}

document.onmousemove = function(e)
{
 if (window.event) e = window.event;
 xm = e.clientX;
 ym = e.clientY;
 return false;
}
</script>
</head>
<body>
<div id="screen">
<div id="pan">
<div class="frame" title="欢迎来到源码搜藏网"><img src="http://www.codesocang.com/images/01.jpg"></div>
<div class="frame" title="一个高质量源码下载网站"><img src="http://www.codesocang.com/images/05.jpg" alt=""></div>
</div>
</div>
<script type="text/javascript">
 sP.init();
 onresize = sP.resize;
</script>
</body>
</html>

非常炫的图片特效，响应鼠标变化

网页特效