(精)图像在网页中飘浮，旋转还是3d效果

Posted on 2007-11-20 15:11 热情的沙漠阅读(313) 评论(3) 编辑收藏

JavaScript,图片3D漂浮旋转特效

<a href='http://www.cnblogs.com/A0NE'>www.cnblogs.com/A0NE 热情的沙漠</a>    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/> <style> v\:* { behavior: url(#default#VML); } </style>  <SCRIPT> // 3D-Slideshow // more javascript from http://www.99new.com.cn var slideurl=new Array() slideurl[0]="http://www.99new.com.cn/supesite/templates/default/images/logo.gif" slideurl[1]="http://www.99new.com.cn/supesite/templates/default/images/logo.gif" slideurl[2]="http://www.99new.com.cn/supesite/templates/default/images/logo.gif" // add a corresponding link for each image // if you don't wont to link an image, enter "#" var slidelink=new Array() slidelink[0]="http://www.99new.com.cn" slidelink[1]="http://www.99new.com.cn" slidelink[2]="http://www.99new.com.cn" // add a corresponding target for each link // acceptable values "_blank" or "_top" or "_parent" or "_self" var slidetarget=new Array() slidetarget[0]="_blank" slidetarget[1]="_self" slidetarget[2]="_top" // set the width of the 3D-border (pixels) var backdepth=6 // set thecolorof the 3D-border (HTML-values required) var fillcolor="#666666" // set the standstill (seconds) for the images (required for Netscape Navigator) var standstill=3 // set the form of the imageframe // acceptable values are "oval" or "rect" var imageform="oval" // do not edit below this line var slidewidth=1 var slideheight=1 var ns6=document.getElementById&&!document.all?1:0 var opera=navigator.userAgent.match(/Opera/) var ie5=document.getElementById&&document.all&&!opera?1:0 standstill*=1000 var floatingspeed=1 var tempo=20 var numberofimages=slideurl.length-1 var stepx=new Array() var stepy=new Array() for (i=0;i<=numberofimages;i++) { stepx[i]=randommakerNS(floatingspeed) stepy[i]=randommakerNS(floatingspeed) } var imgwidth=new Array() var imgheight=new Array() for (i=0;i<=numberofimages;i++) { imgwidth[i]=10 imgheight[i]=10 } var x,y var marginbottom var marginleft=0 var margintop=0 var marginright var timer var i_fadestrength=new Array() var i_fadestep=new Array() var i_fadenow=new Array() var i_fadenowmax=new Array() for (i=0;i<=slideurl.length;i++) { i_fadenowmax[i]=2 i_fadestrength[i]=randommakerNS(99) i_fadestep[i]=1 i_fadenow[i]=0 } var spancontent=new Array() var i_spancontent=0 var imgpreload=new Array() for (i=0;i<=slideurl.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=slideurl[i] } for (i=0;i<=numberofimages;i++) { spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a>" } var i_angle1=0 var i_size=1 var i_pic=0 var posleft=0 var postop=0 var x_extrusionangle=0 var y_extrusionangle=0 var x_rotationcenter=0 var y_rotationcenter=0 var pagewidth var pageheight function initNS() { marginbottom=window.innerHeight-11 marginright=window.innerWidth-11 var thisspan=document.getElementById('span0') thisspan.innerHTML=spancontent[0] var thisspan=document.getElementById('span0') imgwidth[0]=parseInt(thisspan.offsetWidth) imgheight[0]=parseInt(thisspan.offsetHeight) var maxleftstart=marginright-imgwidth[0] var maxtopstart=marginbottom-imgheight[0] var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+randommakerNS(maxleftstart) thisspan.top=parseInt(thisspan.top)+randommakerNS(maxtopstart) thisspan.visibility="visible" checkmovementNS() } function randommakerNS(range) { rand=Math.floor(range*Math.random()) if (rand==0) {rand=Math.ceil(range/2)} return rand } function checkmovementNS() { checkpositionNS() movepicturesNS() timer=setTimeout("checkmovementNS()",tempo) } function movepicturesNS() { var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+stepx[0] thisspan.top=parseInt(thisspan.top)+stepy[0] i_fadenow[0]++ if (i_fadenow[0]>=i_fadenowmax[0]) { i_fadenow[0]=0 if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1} else if (i_fadestrength[0]<=0) { i_fadestep[0]=i_fadestep[0]*-1 i_spancontent++ if (i_spancontent>=spancontent.length) {i_spancontent=0} document.getElementById('span0').innerHTML=spancontent[i_spancontent] } } i_fadestrength[0]+=i_fadestep[0] document.getElementById('span0').style.MozOpacity=Math.round(i_fadestrength[0])/100 } function checkpositionNS() { imgwidth[0]=parseInt(document.getElementById('span0').offsetWidth) imgheight[0]=parseInt(document.getElementById('span0').offsetHeight) var thisspan=document.getElementById('span0').style var leftx=parseInt(thisspan.left) var topy=parseInt(thisspan.top) if (leftx>marginright-imgwidth[0]-floatingspeed) { thisspan.left=leftx-Math.abs(stepx[0]+1) stepx[0]=randommakerNS(floatingspeed)*-1 } if (leftx<marginleft) { thisspan.left=leftx+Math.abs(stepx[0]) stepx[0]=randommakerNS(floatingspeed) } if (topy>marginbottom-imgheight[0]-floatingspeed) { thisspan.top=topy-Math.abs(stepy[0]) stepy[0]=randommakerNS(floatingspeed)*-1 } if (topy<margintop) { thisspan.top=topy+Math.abs(stepy[0]) stepy[0]=randommakerNS(floatingspeed) } } function initIE() { var i_preload=0 for (i=0;i<=slideurl.length-1;i++) { var imgref=eval("document.n"+i) if (imgref.complete) {i_preload++} } if (i_preload>=slideurl.length-1) { slidewidth=document.getElementById('spn1').offsetWidth slideheight=document.getElementById('spn1').offsetHeight pagewidth=document.body.clientWidth pageheight=document.body.clientHeight document.getElementById('rectid').style.width=slidewidth document.getElementById('rectid').style.height=slideheight posleft=(pagewidth-slidewidth)/2 postop=(pageheight-slideheight)/2 x_rotationcenter=(posleft/slidewidth)/2 y_rotationcenter=(postop/slideheight)/2 var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenter document.getElementById('rectid').style.left=posleft document.getElementById('rectid').style.top=postop document.getElementById('extrusionid').rotationcenter=rotationcenter rotateIE() } else { var timer=setTimeout("initIE()",200) } } function rotateIE() { i_angle1+=1 if (i_angle1>=360) { i_angle1=0 } if (i_angle1==127) { i_pic++ if (i_pic>=slideurl.length) {i_pic=0} document.getElementById('fillid').src=slideurl[i_pic] } document.getElementById('rectid').style.rotation=i_angle1 document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1 var timer=setTimeout("rotateIE()",30) } function openpageIE() { if (slidetarget[i_pic]=="_blank") { window.open(slidelink[i_pic]) } else if (slidetarget[i_pic]=="_self") { document.location.href(slidelink[i_pic]) } else if (slidetarget[i_pic]=="_top" || slidetarget[i_pic]=="_parent") { top.location.href(slidelink[i_pic]) } } if (ns6) { document.write("<span id='span0' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0'></span>") document.close() window.onload=initNS } if (ie5) { document.write('<div id="preloadimages" style="position:absolute;left:0px;top:-5px;visibility:hidden">') for (i=0;i<=slideurl.length-1;i++) { document.write('<span id="spn'+i+'" style="position:absolute;width:2px;left:0px;top:0px;">') document.write('<img src="'+slideurl[i]+'" name="n'+i+'">') document.write('</span>') } document.write('</div>') document.write('<v:'+imageform+' id="rectid" style="position:absolute;top:0;left:0;width:'+slidewidth+';height:'+slideheight+'" onClick="openpageIE()">') document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" rotationcenter="0,0,0" backdepth="'+backdepth+'" diffusity="2.5" metal="true">') document.write('</v:extrusion>') document.write('<v:fill id="fillid" opacity="100%" color="'+fillcolor+'" type="frame" src="'+slideurl[0]+'"/>') document.write('</v:'+imageform+'>') window.onload=initIE } </script>

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

刷新评论刷新页面返回顶部

程序员问答社区，解决您的IT难题

博客园首页博问新闻闪存程序员招聘知识库

A0NE

日历

公告

(精)图像在网页中飘浮，旋转还是3d效果