用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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
JavaScript实现随机五位数验证码
Sep 27 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
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
json数据与字符串的相互转化示例
2013/09/18 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
探寻JavaScript中this指针指向
2016/04/23 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
python中bisect模块用法实例
2014/09/25 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
在python中安装basemap的教程
2018/09/20 Python
python实现共轭梯度法
2019/07/03 Python
django-filter和普通查询的例子
2019/08/12 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python 调整图片亮度的示例
2020/12/03 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
C++是不是类型安全的
2014/02/18 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
住房抵押登记委托书
2014/09/27 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis