html相册（可以送女友^_^）

来源：互联网发布：手机上的数据处理软件编辑：程序博客网时间：2024/05/01 01:50

html相册

1.新建*.txt，把代码拷入，重命名为*.html。

2.新建文件夹，命名为11。放入6张照片，分别命名为：1.jpg，2.jpg，3.jpg，4.jpg，5.jpg，6.jpg。

3.用浏览器打开*.html 即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>给亲爱的编的</title><meta http-equiv="imagetoolbar" content="no"><style type="text/css">html {overflow: hidden;}body {background: #222;width: 100%;height: 100%;cursor: crosshair;}.spanSlide {position: absolute;background: #000;font-size: 1px;overflow: hidden;}.imgSlide {position: absolute;left: 5%;top: 5%;width: 90%;height: 90%;overflow: hidden;}.txtSlide {position: absolute;top: 5%;left: 50px;width:100%;color:#FFF;font-family: arial, helvetica, verdana, sans-serif;font-weight: bold;font-size:96px;letter-spacing:12px;filter: alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;}</style><script type="text/javascript">var ym=0;var ny=0;createElement = function(container, type, param){o=document.createElement(type);for(var i in param)o[i]=param[i];container.appendChild(o);return o;}mooz = {O:[],/////////mult:6,nbI:5,/////////rwh:0,imgsrc:0,W:0,H:0,Xoom:function(N){this.o = createElement(document.getElementById("screen"), "span", {'className':'spanSlide'});img = createElement(this.o, "img", {'className':"imgSlide",'src':mooz.imgsrc[N%mooz.imgsrc.length].src});spa = createElement(this.o, "span", {'className':"imgSlide"});txt = createElement(spa, "span", {'className':"txtSlide",'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title});this.N = 10000+N;},mainloop:function(){with(this){for(i=0; i<mooz.nbI; i++) {O[i].N += (ym-ny)/8000;N = O[i].N%nbI;ti = Math.pow(mult,N);with(O[i].o.style){left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";zIndex = Math.round(10000-ti*.1);width  = Math.round(ti*rwh)+"px";height = Math.round(ti)+"px";}}}setTimeout("mooz.mainloop();", 16);},oigres:function(){with(this){W = parseInt(document.getElementById("screen").style.width);H = parseInt(document.getElementById("screen").style.height);imgsrc = document.getElementById("images").getElementsByTagName("img");rwh = imgsrc[0].width/imgsrc[0].height;for(var i=0;i<nbI;i++) O[i] = new Xoom(i);mainloop();}}}document.onmousemove = function(e){if(window.event) e=window.event;ym = (e.y || e.clientY);if(ym/2>ny)ny=ym/2;}window.onload = function(){ym = ny+50;mooz.oigres();}</script></head><body><div style="position:absolute;left:50%;top:50%"><div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div><div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Lording...</div><div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div></div><div id="images" style="visibility:hidden"><img title="给" src="11/1.jpg"><img title="你" src="11/2.jpg"><img title="的" src="11/3.jpg"><img title="相" src="11/4.jpg"><img title="册" src="11/5.jpg"></div></body></html>