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

代码如下:

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

赞 (0)

相关推荐

  • 基于JavaScript实现随机颜色输入框

    基于JavaScript实现随机颜色输入框

    废话不多说了额,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onl

  • JS批量修改PS中图层名称的方法

    复制代码 代码如下: #target photoshopapp.bringToFront(); if (documents.length == 0) { alert("没有可处理的文档"); } else { var visibility = false; var docRef = activeDocument; var layers = docRef.layers; if (layers.length == 1 && docRef.activeLayer.isBack

  • js实现的简单radio背景颜色选择器代码

    js实现的简单radio背景颜色选择器代码

    本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • JS实现的系统调色板完整实例

    JS实现的系统调色板完整实例

    本文实例讲述了JS实现的系统调色板.分享给大家供大家参考,具体如下: 运行效果图如下: 整体页面代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DW调色板</title> <script type="text/javascript" langu

  • JS实现的在线调色板实例(附demo源码下载)

    JS实现的在线调色板实例(附demo源码下载)

    本文实例讲述了JS实现的在线调色板.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ColorSchemer -

  • js实现的在线调色板功能完整实例

    js实现的在线调色板功能完整实例

    本文实例讲述了js实现的在线调色板功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <meta name="keywords" content="调色板" /> <meta name=&

  • JavaScript获取图片像素颜色并转换为box-shadow显示

    JavaScript获取图片像素颜色并转换为box-shadow显示

    一.原理: 1.使用HTML5的FileReader API读取图片 FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt) { if(FileReader.DONE==fileReader.readyState) { va

  • 漂亮! js实现颜色渐变效果

    漂亮! js实现颜色渐变效果

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src

  • JavaScript使用Range调色及透明度实例

    颜色搭配是件头疼的事,工作空隙,利用range做个简单的手动调色,可得到rgb值和相应的十六进制色值.因为用到range标签,建议使用搜狗.火狐,IE10及以上版本代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in int

  • JavaScript随机生成颜色的方法

    废话不多说了直接给大家贴js代码了,具体代码如下所述: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button

  • js实现按钮颜色渐变动画效果

    js实现按钮颜色渐变动画效果

    本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

  • JavaScript制作颜色反转小游戏

    游戏规则: 单击方块,被单击的方块及相邻方块变色,当所有蓝色方块变为橙色时,完成任务,进入下一级. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this

  • JS 网页安全色调色板 DW风格

    DW调色板 var ColorHex=new Array('00','33','66','99','CC','FF') var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF') var current=null function intocolor() { var colorTable='' for (i=0;i' colorTable=colorTable+' ' if (i==0){ col

随机推荐