编程 Javascript

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

Posted in Javascript onDecember 20, 2011

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>用JavaScript防PS里的羽化效果代码 - 3water.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="/upload/201112/20111220011256875.jpg"> </span> 
<span id=ball style="BACKGROUND-COLOR: white; HEIGHT: 150px; POSITION: absolute; TOP: -50px; WIDTH: 150px"></span> 
</center> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

原创javascript小游戏实现代码

Aug 19 Javascript

固定网页背景图同时保持图片比例的思路代码

Aug 15 Javascript

js用typeof方法判断undefined类型

Jul 15 Javascript

js星星评分效果

Jul 24 Javascript

js解决select下拉选不中问题

Oct 14 Javascript

jquery validate demo 基础

Oct 29 Javascript

AngularJS基础 ng-model 指令详解及示例代码

Aug 02 Javascript

JS获得一个对象的所有属性和方法实例

Feb 21 Javascript

jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】

Mar 23 jQuery

完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

Apr 25 Javascript

Net微信网页开发使用微信JS-SDK获取当前地理位置过程详解

Aug 26 Javascript

vue-父子组件和ref实例详解

Nov 10 Javascript

javascript判断iphone/android手机横竖屏模式的函数

Dec 20 #Javascript

五段实用的js高级技巧

Dec 20 #Javascript

更换select下拉菜单背景样式的实现代码

Dec 20 #Javascript

在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

Dec 20 #Javascript

extjs实现选择多表自定义查询功能前台部分(ext源码)

Dec 20 #Javascript

createElement与createDocumentFragment的点点区别小结

Dec 19 #Javascript

javascript面向对象编程代码

Dec 19 #Javascript