正文

网页中图片动态三维展示特效[网页特效]

www.7dspace.com 更新日期：2005-8-17 2:01:16 七度空间

<HTML> <HEAD> <title>七度空间图片动态立体展示</title> <meta name="Author" content="from at http://www.7dspace.com"> <meta http-equiv="imagetoolbar" content="no"> <STYLE> BODY { cursor:url("../CRCROSS.cur"); } </STYLE> </HEAD> <BODY bgColor=#000000 scroll=no onload="zyva()"> <DIV id=images style="visibility:hidden"> <IMG src="/files/pic/20050817/200581702005217562.png"> <IMG src="/files/pic/20050817/20058170200547870.png"> <IMG src="/files/pic/20050817/200581702005729930.png"> <IMG src="/files/pic/20050817/200581702005879972.png"> <IMG src="/files/pic/20050817/200581702010021079.png"> <IMG src="/files/pic/20050817/200581702010254449.png"> </DIV>  <SPAN style="position:absolute;left:50%;top:50%"> <OBJECT id=DAControl style="visibility:hidden;border:#111111 solid 20px;position:absolute;width:320;height:240;left:-200;top:-140" classid=CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D> <PARAM NAME="OpaqueForHitDetect" VALUE="0"> <PARAM NAME="UpdateInterval" VALUE="0.016"> </OBJECT> </SPAN>  <span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span> <span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333"><span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span></span></span> <script>m00=document.getElementById("images").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>   <BGSOUND balance=0 src="odins.mid" volume=0 loop=infinite> <SCRIPT> // ====================================================== // http://www.7dspace.com // ====================================================== screen.bufferDepth = 16 document.onselectstart = function (){ return false } xm = 0 ym = 0 cx = 0 cy = 0 Z = .02 var m, PerCam function programDA(){ m = DAControl.MeterLibrary // square geometry (2 triangles) square=m.TriMesh (2, [1,0,-1,-1,0,-1,-1,0,1,1,0,-1,-1,0,1,1,0,1], [0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0], [1,1,0,1,0,0,1,1,0,0,1,0], null) square = square.Transform(m.Scale3Uniform(Z)) // light Lig = m.ModifiableBehavior(m.colorRgb255(255,255,255)) geo = m.AmbientLight.LightColor(Lig) // position faces addFace(0, m.xVector3,Math.PI/2, m.zVector3,Math.PI/2, Z,0,0) addFace(1, m.zVector3,0, m.zVector3,0 , 0,-Z,0) addFace(2, m.yVector3,-Math.PI, m.xVector3,-Math.PI, 0,Z,0) addFace(3, m.xVector3,Math.PI/2, m.zVector3,-Math.PI/2, -Z,0,0) addFace(4, m.zVector3,0, m.xVector3,Math.PI/2, 0,0,-Z) addFace(5, m.zVector3,Math.PI, m.xVector3,-Math.PI/2, 0,0,Z) // rotation geo = geo.Transform(m.Rotate3Rate(m.xVector3, 0)).Transform(m.Rotate3Rate(m.yVector3, 0)).Transform(m.Rotate3Rate(m.zVector3, 0)) // camera PerCam = m.ModifiableBehavior(m.PerspectiveCamera(Z,Z-.1)) // rendering DAControl.Image = geo.render(PerCam) } function addFace(i, v1,r1, v2,r2, tx,ty,tz){ // import image htmlTexture = m.ImportImage(images.children[i].src).MapToUnitSquare() img = square.TextureImage(htmlTexture) // orientation face geo = m.UnionGeometry(geo,img.Transform(m.Rotate3(v2,r2)).Transform(m.Translate3(tx,ty,tz)).Transform(m.Rotate3(v1,r1))) } document.onmousemove = function(){ xm = window.event.x ym = document.body.offsetHeight * .5 - window.event.y } function Om(){ cx+=Math.round((xm-cx)/20) cy+=Math.round((ym-cy)/20) PerCam.SwitchTo(m.PerspectiveCamera(.05,.04).Transform(m.Translate3(0,0,-Z*2)).Transform(m.Rotate3(m.yVector3,cx/100)).Transform(m.Rotate3(m.zVector3,cy/100))) Lig.SwitchTo(m.colorRgb255(255,128+Math.sin(cy/100)*128,0)) } function zyva(){ programDA() DAControl.style.visibility="visible" DAControl.Start() setInterval("Om()",16) } </SCRIPT> </BODY></HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

　　需要的6幅图片：

上一篇：网页中鼠标感应的图片[网页特效]
下一篇：网页动态图形显示特效[网页特效]

作者：闪电儿来源：七度空间 ( 责任编辑:7dspace )

【收藏此页】【打印】【关闭】

站内搜索

热点导读

特别推荐