教程集 > 脚本编程 > javascript > 正文一个字酷

一个字酷

发布时间：2023-06-08 编辑：jiaochengji.com

教程集为您提供一个字酷等资源，欢迎您收藏本站，我们将为您提供最新的一个字酷资源

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>8</title>  <meta http-equiv="imagetoolbar" content="no">  <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("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("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="" alt=""></div>  		<div class="frame" title="?We’ll start from here?, my partner said."><img src="" alt=""></div>  		<div class="frame" title="As we proceeded, I recalled a similar situation"><img src="" alt=""></div>  		<div class="frame" title="The place was no example of resource efficient construction."><img src="" alt=""></div>  		<div class="frame" title="Ultracompaction had been caused by the linear vibrator."><img src="" alt=""></div>  		<div class="frame" title="We put the meter to use. It was the fully-built one."><img src="" alt=""></div>  		<div class="frame" title="Soon we accessed the restricted area."><img src="" alt=""></div>  		<div class="frame" title="The combo password was validated."><img src="" alt=""></div>  		<div class="frame" title="We succeeded to quantify the network."><img src="" alt=""></div>  	</div>  </div>    <script type="text/javascript">  	/* ==== start script ==== */  	sP.init();  	onresize = sP.resize;  </script>    </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
优酷的视频怎么下载优酷视频下载方法详解
 优酷视频无法播放或打不开问题解决办法
 优酷客户端初始化错误与提示程序运行错误等错误问题总结
 Illustrator绘制超酷立体字效果教程
 Illustrator设计绘制超酷效果的立体字效果教程
 优酷视频不能全屏问题解决办法
 Photoshop制作酷炫个性的qq透明头像教程
 优酷提示错误代码2003及5000问题解决方法
 Illustrator路径混合工具绘制超酷炫的标志字体效果制作教程
 jQuery语法高亮插件 Snippet

上一篇：163网站文章文本弹出广告下一篇：js控制图片

[关闭]

一个字酷

最近更新

浏览排行