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

200 阅读 0 评论 132 点赞

我是靠谱客的博主不安大树，最近开发中收集的这篇文章主要介绍用JavaScript仿PS里的羽化效果代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>用JavaScript防PS里的羽化效果代码 - www.uoften.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.uoften.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>