鼠标移过翻开的JS相册代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是鼠标移过翻开的JS相册代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="程序员设计师联盟淘宝店 http://13141618.taobao.com/" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为鼠标移过翻开的JS相册代码，属于站长常用代码" />
<title>鼠标移过翻开的JS相册代码</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;
		cursor: url("../cross_rm.cur"), auto;
	}
	#pan {
		position: absolute;
		height: 150%;
		width: 150%;
		padding: 5%;
		background: #000000 url("images/bumps2.gif");
	}
	#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 url("images/bumps3.gif");
		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 ()
	{
		/* ==== init script ==== */
		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 each pane ==== */
		for (var i = 0, o; o = this.div[i]; i++)
		{
			if (o.className == 'frame')
			{
				/* ==== create legend ==== */
				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++;
				/* ==== flap mouse over event ==== */
				o.r.onmouseover = function ()
				{
					if (!this.m && this.img.complete)
					{
						/* ==== switch image ==== */
						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;
							}
						}
						/* ==== up++ ==== */
						if (sP.O)
						{
							sP.O.s = 2;
							sP.C.push(sP.O);
						}
						this.m = true;
						sP.O = this;
						sP.Or = this;
					}
				}
				/* ==== resize image ==== */
				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';
				}
			}
		}
		/* ==== start script ==== */
		sP.resize();
		sP.run();
	},

	resize : function () {
		/* ==== window resize ==== */
		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();
	},

	/* ==== main loop ==== */
	run : function ()
	{
		/* ==== scroll main frame ==== */
		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';
		/* ==== lissajou ==== */
		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';
		}
		/* ==== up ==== */
		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';
		}
		/* ==== down ==== */
		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);
	}
}

/* ==== global mouse position ==== */
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="Isolating the longer dimension of the main hall"><img src="images/gr69.jpg" alt=""></div>
		<div class="frame" title="?We’ll start from here?, my partner said."><img src="images/or66.jpg" alt=""></div>
		<div class="frame" title="As we proceeded, I recalled a similar situation"><img src="images/bl117.jpg" alt=""></div>
		<div class="frame" title="The place was no example of resource efficient construction."><img src="images/bl112.jpg" alt=""></div>
		<div class="frame" title="Ultracompaction had been caused by the linear vibrator."><img src="images/gr68.jpg" alt=""></div>
		<div class="frame" title="We put the meter to use. It was the fully-built one."><img src="images/rd103.jpg" alt=""></div>
		<div class="frame" title="Soon we accessed the restricted area."><img src="images/rd101.jpg" alt=""></div>
		<div class="frame" title="The combo password was validated."><img src="images/gr66.jpg" alt=""></div>
		<div class="frame" title="We succeeded to quantify the network."><img src="images/bl116.jpg" alt=""></div>
	</div>
</div>

<script type="text/javascript">
	/* ==== start script ==== */
	sP.init();
	onresize = sP.resize;
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)