jquery做的3D相册

来源：互联网发布：263云通信企业版mac 编辑：程序博客网时间：2024/05/16 15:09

<的DOCTYPE HTML的市民！“ - / / W3C的/ / DTD中的XHTML 1.0过渡/ /恩”“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=utf-8" />的<title>用的DHTML实现的三维特效图片展示相册_酷站代码</标题><meta http-equiv="imagetoolbar" content="no"><样式type="text/css">HTML的{溢出：隐藏;}身体{位置：绝对的;保证金：0px;填充：0px;背景：＃的Eee;宽度：100％;身高：100％;颜色：＃呋;字体- family：宋体;字体大小：0.8em;}{＃屏幕位置：绝对的;宽度：100％;身高：100％;背景：＃000;溢出：隐藏;}＃屏幕IMG公司帆布{位置：绝对的;左：- 9999px;光标：指针;图像渲染：optimizeSpeed;}＃屏幕。的HREF {边界：1px＃足协点缀;}＃屏幕。雾{位置：绝对的;背景：＃呋;不透明度：0.1;过滤器：α（不透明度= 10）;}＃命令{位置：绝对的;左：件1EM;顶部：件1EM;宽度：130px;Z -索引：30000;背景：＃000;边境：＃000固体件1EM;}{＃酒吧位置：亲属;左：件1EM;顶部：件1EM;高度：160px;}＃吧。按钮{位置：绝对的;背景：＃222;宽度：20像素;高度：20像素;光标：指针;}＃吧。装载{背景：＃666;}＃吧。看{背景：＃呋;}＃吧。选定{背景：＃f00;}{＃urlInfo位置：绝对的;背景：网址（图/ r.gif）不重复0 4px;能见度：隐藏;Z -索引：30000;填充左：12px;光标：指针;}</样式><script type="text/javascript">/ / ================================================ =============/ / ===== =====三维画廊实验www.5icool.org/ / ================================================ =============风险m3D =函数（）{/ * ---- ----私人瓦尔* /风险diapo = []，IBM公司，可控硅，酒吧，选择urlInfo，imagesPath =“图片/”，相机= {十：0，Ÿ：0和Z：-650，下：0，视场：500}，净重= 0，铵= 0;/ * ==== ====相机之间的方法* /camera.setTarget =功能（含c0的T1，P）的{如果（Math.abs（T1的 - c0的）> 0.1）{camera.s = 1;camera.p = 0;camera.d = t1 - 将c0的;如果（P）的{camera.d *= 2;camera.p = 9;}}}camera.tween =功能（五）{如果（camera.s！= 0）{camera.p + = camera.s;相机[V]的+ = camera.d * camera.p * 0.01;如果（camera.p == 10）camera.s = -1;否则，如果（camera.p == 0）camera.s = 0;}返回camera.s;}/ *构造==== ==== diapo * /风险Diapo =功能（氮，IMG公司的x，y，z）的{如果（img）{this.url = img.url;this.title = img.title;this.color = img.color;this.isLoaded = 0;如果（document.createElement（“画布”）。getContext）{/ * ----使用图像（性能技巧）---- *地方帆布/this.srcImg =新形象（）;this.srcImg.src = imagesPath + img.src;this.img = document.createElement（“画布”）;this.canvas =真;scr.appendChild（this.img）;还有{}/ * ----正常图像---- * /this.img = document.createElement（'img'）;this.img.src = imagesPath + img.src;scr.appendChild（this.img）;}/ * ---- ----点击事件* /this.img.onclick =函数（）{如果（camera.s）返回;如果（this.diapo.isLoaded）{如果（this.diapo.urlActive）{/ * ---- ----跳超链接* /top.location.href = this.diapo.url;还有{}/ * ----目标位置---- * /camera.tz = this.diapo.z - camera.fov;camera.tx = this.diapo.x;camera.ty = this.diapo.y;/ * ---- ----禁用以前选定img * /如果（节选）{selected.but.className =“按钮看”;selected.img.className =“”;selected.img.style.cursor =“指针”;selected.urlActive = 0;urlInfo.style.visibility =“隐藏”;}/ * ----选择电流img ---- * /this.diapo.but.className =“按钮选择”;插补（假）;选择= this.diapo;}}}/ * ---- ----命令栏按钮* /this.but = document.createElement（'格'）;this.but.className =“按钮”;bar.appendChild（this.but）;this.but.diapo =这;this.but.style.left = Math.round（（this.but.offsetWidth * 1.2）*（不适用％4））+'像素';this.but.style.top = Math.round（（this.but.offsetHeight * 1.2）* Math.floor（牛顿/ 4））+'像素';this.but.onclick = this.img.onclick;国际海事局= this.img;this.img.diapo =这;this.zi = 25000;还有{}/ * ---- ----透明的分区* /this.img = document.createElement（'格'）;this.isLoaded =真;this.img.className =“雾”;scr.appendChild（this.img）;this.w = 300;this.h = 300;this.zi = 15000;}/ * ---- ----对象变量* /this.x = X的;this.y = Ÿ;this.z = Z的;this.css = this.img.style;}/ * ==== ====主要三维动画* /Diapo.prototype.anim =函数（）{如果（this.isLoaded）{/ * ----三维到二维投影---- * /风险值x = this.x - camera.x;风险为Y = this.y - camera.y;幉杓= this.z - camera.z;如果（ž“20）的z + = 5000;VaR的P值camera.fov / Z轴;风险瓦特= this.w * p的;风险高= this.h * p的;/ * ---- HTML渲染---- * /this.css.left = Math.round（净重+ x的* p的 - 宽* 0.5）+'像素';this.css.top = Math.round（铵+ Ÿ * p的 - 高* 0.5）+'像素';this.css.width = Math.round（宽）+'像素';this.css.height = Math.round（八）+'像素';this.css.zIndex = this.zi - Math.round（z）的;还有{}/ * ----图像加载？ ---- * /this.isLoaded = this.loading（）;}}/ *初始化的OnLoad ==== ==== * /Diapo.prototype.loading =函数（）{如果（（this.canvas＆＆this.srcImg.complete）| | this.img.complete）{如果（this.canvas）{/ * ---- ----帆布版本* /this.w = this.srcImg.width;this.h = this.srcImg.height;this.img.width = this.w;this.img.height = this.h;VaR的上下文= this.img.getContext（“二维”）;context.drawImage（this.srcImg，0，0，this.w，this.h）;还有{}/ * ---- ----纯映像版本* /this.w = this.img.width;this.h = this.img.height;}/ * ---- ----加载按钮* /this.but.className + =“装”;返回true;}返回false;}////////////////////////////////////////////////// /////////////////////////// * ==== ====屏幕尺寸* /风险调整=函数（）{净重= scr.offsetWidth * 0.5;铵= scr.offsetHeight * 0.5;}/ *禁用插在动画==== ==== * /风险插值=功能（双三次）{风险值= 0，邻;而（海外= diapo [我+ +]）{如果（o.but）{o.css.msInterpolationMode =双三次？ '双三次'：'最近邻居'; / /使IE8的快乐o.css.imageRendering =双三次？ 'optimizeQuality'：'optimizeSpeed'; / /没有真正的工作...}}}/ * init脚本==== ==== * /风险的init =功能（数据）{/ * ---- ----容器* /可控硅= document.getElementById（“屏幕”）;酒吧= document.getElementById（“吧”）;urlInfo = document.getElementById（“urlInfo”）;调整（）;/ * ---- ----加载图像* /风险值= 0，啊，每组data.length;而（海外=数据[我+ +]）{/ * ---- ----图像* /风险值x = 1000 *（（我％4） - 1.5）;风险为Y = Math.round（Math.random（）* 4000） - 2000;幉杓=我*（5000 / N）的;diapo.push（新Diapo（我 - 1，澳中，x，Y，Z轴））;/ * ---- ----透明帧* /风险K表= diapo.length - 1;为（j = 0的风险; Ĵ <3; J + +中）{风险值x = Math.round（Math.random（）* 4000） - 2000;风险为Y = Math.round（Math.random（）* 4000） - 2000;diapo.push（新Diapo（钾，空中，x，Y，Z轴+ 100））;}}/ * ----启动发动机---- * /运行（）;}////////////////////////////////////////////////// /////////////////////////// *主循环==== ==== * /VaR的运行=函数（）{/ * ---- ---- X轴移动* /如果（camera.tx）{如果（camera.s！）camera.setTarget（camera.x，camera.tx）;风险米= camera.tween（'X'号）;如果camera.tx = 0（米！）;/ Y轴移动* ---- ---- * /}否则如果（camera.ty）{如果camera.setTarget（camera.y，camera.ty）（camera.s！）;风险米= camera.tween（'y'的）;如果camera.ty = 0（米！）;/ * ---- ---- Z轴移动* /}否则如果（camera.tz）{如果camera.setTarget（camera.z，camera.tz）（camera.s！）;风险米= camera.tween（的'Z'）;如果（！米）{/ * ---- ----动画结束* /camera.tz = 0;插补（真）;/ * ---- ----激活超链接* /如果（selected.url）{selected.img.style.cursor =“指针”;selected.urlActive =真;selected.img.className =的“href”;urlInfo.diapo =选择;urlInfo.onclick = selected.img.onclick;urlInfo.innerHTML = selected.title | | selected.url;urlInfo.style.visibility =“看得见”;urlInfo.style.color = selected.color | |“＃呋”;urlInfo.style.top = Math.round（selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5）+“像素”;urlInfo.style.left = Math.round（selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5）+“像素”;还有{}selected.img.style.cursor =“默认”;}}}/ * ---- ----阿尼姆图像* /风险值= 0，邻;而（海外= diapo [我+ +]）o.anim（）;/ * ---- ----循环* /setTimeout的（运行，32）;}返回{////////////////////////////////////////////////// /////////////////////////// *初始化脚本==== ==== * /初始化：初始化}}（）;</脚本></头>的<body><div id="screen"><div id="command"><h1>三维特效图片展示相册</ H1的><div id="bar"> </格></格><div id="urlInfo"> </格></格><script type="text/javascript">/ * ==== ====启动脚本* /的setTimeout（函数（）{m3D.init（[{src目录下：'canvas.jpg'，网址：'http://www.5icool.org/'，题目：'跳转到随机脚本'，颜色：'＃呋'}，{src目录下：'canvas1.jpg'}，{src目录下：'canvas2.jpg'}，{src目录下：'canvas3.jpg'}，{src目录下：'canvas4.jpg'}，{src目录下：'canvas5.jpg'}，{src目录下：'canvas6.jpg'}，{src目录下：'canvas7.jpg'}，{src目录下：'canvas8.jpg'}，{src目录下：'canvas9.jpg'}，{src目录下：'canvas10.jpg'}，{src目录下：'canvas11.jpg'}，{src目录下：'canvas12.jpg'}，{src目录下：'canvas13.jpg'}，{src目录下：'canvas14.jpg'}，{src目录下：'canvas15.jpg'}，{src目录下：'canvas16.jpg'}，{src目录下：'canvas17.jpg'}，{src目录下：'canvas18.jpg'}，{src目录下：'canvas19.jpg'}，{src目录下：'canvas20.jpg'}，{src目录下：'canvas21.jpg'}，{src目录下：'canvas22.jpg'}，{src目录下：'canvas23.jpg'，网址：'http://www.5icool.org/'，颜色：'＃呋'}]）;}，500）;</脚本></身体></的HTML>

我只想说：人不狠站不稳…………