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

2024-09-05 12:21:11

字体：大中小

来源：转载

供稿：网友

非常炫的图片特效，响应鼠标，鼠标经过时显示放大图片。图片获取的远程图片，可能会比较慢，请等待。

<!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="/d/file/p/2024/09-05/0707616084a82627a62f7b66af04da99.jpg"></div><div class="frame" title="一个高质量源码下载网站"><img src="/d/file/p/2024/09-05/b1909b10aec958d3aeac21cbd75fc9f4.jpg" alt=""></div></div></div><script type="text/javascript"> sP.init(); onresize = sP.resize;</script></body></html>

上一篇：仿天极网首页幻灯图片切换特效

下一篇：鼠标移上改变图片透明度的CSS代码