Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Trình diễn ảnh ba chiều
URL: https://www.javascriptbank.com/stunning-3d-animation.html
Hiệu ứng tạo một trình diễn ảnh ba chiều qua một hình cầu, hai mặt của quả cầu sẽ lần lượt đổi các ảnh khác nhau.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Trình diễn ảnh ba chiều
URL: https://www.javascriptbank.com/stunning-3d-animation.html
<style>v:* { behavior: url(#default#VML); }</style><SCRIPT>// 3D-Slideshow// set the URLs of your images// add as amy as you likevar slideurl=new Array()slideurl[0]="../image/logojs.gif"slideurl[1]="../image/bannerechip.gif"slideurl[2]="../image/logojs.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.altavista.com"slidelink[1]="#"slidelink[2]="http://www.google.com"// 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 linevar slidewidth=1var slideheight=1var ns6=document.getElementById&&!document.all?1:0 var opera=navigator.userAgent.match(/Opera/) var ie5=document.getElementById&&document.all&&!opera?1:0 standstill*=1000var floatingspeed=1var tempo=20var numberofimages=slideurl.length-1var 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]=10imgheight[i]=10}var x,yvar marginbottomvar marginleft=0var margintop=0var marginrightvar timervar 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]=2i_fadestrength[i]=randommakerNS(99)i_fadestep[i]=1i_fadenow[i]=0}var spancontent=new Array()var i_spancontent=0var 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=0var i_size=1var i_pic=0var posleft=0var postop=0var x_extrusionangle=0var y_extrusionangle=0var x_rotationcenter=0var y_rotationcenter=0var pagewidthvar pageheightfunction 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]=0if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1}else if (i_fadestrength[0]<=0) {i_fadestep[0]=i_fadestep[0]*-1i_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').stylevar 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=0for (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').offsetWidthslideheight=document.getElementById('spn1').offsetHeightpagewidth=document.body.clientWidthpageheight=document.body.clientHeightdocument.getElementById('rectid').style.width=slidewidthdocument.getElementById('rectid').style.height=slideheightposleft=(pagewidth-slidewidth)/2postop=(pageheight-slideheight)/2x_rotationcenter=(posleft/slidewidth)/2y_rotationcenter=(postop/slideheight)/2var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenterdocument.getElementById('rectid').style.left=posleftdocument.getElementById('rectid').style.top=postopdocument.getElementById('extrusionid').rotationcenter=rotationcenterrotateIE()}else {var timer=setTimeout("initIE()",200)}}function rotateIE() {i_angle1+=1if (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_angle1document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1var 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>