用JavaScript仿PS里的羽化效果代碼
更新時間:2011年12月20日 01:13:04 作者:
JavaScript圓形虛幻效果,跟PS里面的羽化效果有點像,需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用JavaScript防PS里的羽化效果代碼 - www.dbjr.com.cn</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>
您可能感興趣的文章:
- JS批量修改PS中圖層名稱的方法
- JS實現(xiàn)的系統(tǒng)調(diào)色板完整實例
- JS實現(xiàn)的在線調(diào)色板實例(附demo源碼下載)
- JS 網(wǎng)頁安全色調(diào)色板 DW風(fēng)格
- JavaScript使用Range調(diào)色及透明度實例
- 基于JavaScript實現(xiàn)隨機顏色輸入框
- JavaScript隨機生成顏色的方法
- JavaScript制作顏色反轉(zhuǎn)小游戲
- 漂亮! js實現(xiàn)顏色漸變效果
- JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
- js實現(xiàn)按鈕顏色漸變動畫效果
- js實現(xiàn)的簡單radio背景顏色選擇器代碼
- js實現(xiàn)的在線調(diào)色板功能完整實例
相關(guān)文章
javascript innerText和innerHtml應(yīng)用
innerText和innerHtml看字面也應(yīng)該理解的了2010-01-01javascript加載xml 并解析各節(jié)點的值(實現(xiàn)方法)
下面小編就為大家?guī)硪黄猨avascript加載xml 并解析各節(jié)點的值(實現(xiàn)方法)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10直接在JS里創(chuàng)建JSON數(shù)據(jù)然后遍歷使用
本節(jié)為大家講解下直接在JS里創(chuàng)建JSON數(shù)據(jù),然后遍歷使用,需要的朋友可以參考下2014-07-07手把手教你uniapp和uview2.0實現(xiàn)表單校驗實戰(zhàn)
表單提交對大家來說應(yīng)該都不陌生,這是個很常見的功能,這篇文章主要給大家介紹了關(guān)于手把手教你uniapp和uview2.0實現(xiàn)表單校驗的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05