用JavaScript仿PS里的羽化效果代码

  

复制代码 代码如下:

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  <title>用JavaScript防PS里的羽化效果代码 - www.glzy8.com</title>

  </head>

  <body onload=setValues()>

  <center>

  <SCRIPT language=JavaScript>

  <!-- Beginning of JavaScript -

  var x,y

  var marginbottom

  var marginleft=0

  var margintop=0

  var marginright

  var cliptop

  var clipbottom

  var clipleft

  var clipright

  var clippoints

  var ballheight=150

  var ballwidth=150

  var imageheight=525

  var imagewidth=457

  var tempo=25

  var stepx=12

  var stepy=6

  var timer

  function setValues() {

  if (document.all) {

  marginbottom = imageheight-ballheight

  marginright = imagewidth-ballwidth

  document.all.ball.style.posLeft=randommaker(400)

  document.all.ball.style.posTop=0

  document.all.textcontent.style.posLeft=0

  document.all.textcontent.style.posTop=0

  document.all.ball.style.filter="alpha(opacity=0,finishopacity=100,style=2,startX=0px,startY=0px,finishX=100px,finishY=100px)"

  moveball()

  }

  }

  // randomfunction

  function randommaker(range) {

  rand=Math.floor(range*Math.random())

  return rand

  }

  function moveball() {

  checkposition()

  if (document.all) {

  document.all.ball.style.posLeft+=stepx

  document.all.ball.style.posTop+=stepy

  cliptop=document.all.ball.style.posTop

  clipbottom=cliptop+ballheight

  clipleft=document.all.ball.style.posLeft

  clipright=clipleft+ballwidth

  clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

  document.all.textcontent.style.clip=clippoints

  timer=setTimeout("moveball()",tempo)

  }

  }

  function checkposition() {

  if (document.all) {

  if (document.all.ball.style.posLeft>=marginright) {

  stepx=stepx*-1

  document.all.ball.style.posLeft-=10

  }

  if (document.all.ball.style.posLeft<=marginleft) {

  stepx=stepx*-1

  document.all.ball.style.posLeft+=10

  }

  if (document.all.ball.style.posTop>=marginbottom) {

  stepy=stepy*-1

  document.all.ball.style.posTop-=10

  }

  if (document.all.ball.style.posTop<=margintop) {

  stepy=stepy*-1

  document.all.ball.style.posTop+=10

  }

  }

  }

  // - End of JavaScript - -->

  </SCRIPT>

  <span id=textcontent style="LEFT: -5000px; POSITION: absolute; TOP: -2000px"><IMG border=0 src="http://files.glzy8.com/upload/201112/20111220011256875.jpg"> </span>

  <span id=ball style="BACKGROUND-COLOR: white; HEIGHT: 150px; POSITION: absolute; TOP: -50px; WIDTH: 150px"></span>

  </center>

  </body>

  </html>