用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 相关文章推荐
jquery 笔记 事件
Nov 02 Javascript
PHP守护进程实例
Mar 06 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
js实现模糊匹配功能
Feb 15 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
js实现点击生成随机div
Jan 16 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python创建日历实例
2014/08/21 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python super函数使用方法详解
2020/02/14 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
常用的10个Python实用小技巧
2020/08/10 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
大四本科生的自我评价
2013/12/30 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
酒店节能减排方案
2014/05/26 职场文书
树转促学习心得体会
2014/09/10 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
教师个人成长总结
2015/02/11 职场文书
中标通知书格式
2015/04/17 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Java tomcat手动配置servlet详解
2021/11/27 Java/Android