非常酷!3D漂浮图像(页 1) - 【网页编程】 - 凹丫丫网络社区交流|讨论|学习|电脑|文学|情感|生活|休闲|娱乐|灌水

Amm 发表于 2008-5-16 12:59

非常酷!3D漂浮图像

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/> <style> v\:* { behavior: url(#default#VML); } </style>
把如下代码复制到<body>与</body>之间
<SCRIPT> // 3D-Slideshow // more javascript from <A href="http://www.smallrain.net">http://www.smallrain.net</A> var slideurl=new Array() slideurl[0]="pic/blender.png" slideurl[1]="pic/aim.png" slideurl[2]="pic/babelfish.png"
// add a corresponding link for each image // if you don't wont to link an image, enter "#" var slidelink=new Array() slidelink[0]="<A href="http://www.butong.net">http://www.butong.net</A>" slidelink[1]="<A href="http://bz.butong.net">http://bz.butong.net</A>" slidelink[2]="<A href="http://www.butong.net/it/index.htm">http://www.butong.net/it/index.htm</A>"
// 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("")     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('')   document.write('<img src="'+slideurl[i]+'" name="n'+i+'">')   document.write('')  }  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>

页: [1]

凹丫丫网络社区's Archiver

非常酷!3D漂浮图像