编程 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 相关文章推荐

AngularJS数据源的多种获取方式汇总

Feb 02 Javascript

最好用的Bootstrap fileinput.js文件上传组件

Dec 12 Javascript

谈谈Vue.js——vue-resource全攻略

Jan 16 Javascript

ionic2 tabs 图标自定义实例

Mar 08 Javascript

利用node.js爬取指定排名网站的JS引用库详解

Jul 25 Javascript

React中上传图片到七牛的示例代码

Oct 10 Javascript

微信小程序使用progress组件实现显示进度功能【附源码下载】

Dec 12 Javascript

JavaScript中字符串的常用操作方法及特殊字符

Mar 18 Javascript

JavaScript对JSON数组简单排序操作示例

Jan 31 Javascript

如何在Angular应用中创建包含组件方法示例

Mar 23 Javascript

详解Vue demo实现商品列表的展示

May 07 Javascript

vue-cli3.0实现一个多页面应用的历奇经历记录总结

Mar 16 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