<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JS打造的一款响应鼠标变化很炫的图片特效代码 - www.webdm.cn</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')
{
/* http://www.webdm.cn */
o.l = document.createElement('div');
o.l.className = 'legend';
o.appendChild(o.l);
/* ==== create flap ==== */
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
