实现图片多变化的显像效果代码
来源：互联网 发布：粉笔直播课淘宝 编辑：程序博客网 时间：2024/05/19 06:16
实现图片多变化的显像效果代码
以下是代码片段：
<body>
<script language="javascript">
<!--
if (document.all){
document.write('<img src="图片地址" id="box">');
}
//-->
</script></CENTER>
<script language="javascript">
<!--
if (document.all){
pics=new Array("图片地址1","图片地址2","图片地址3","图片地址4","图片地址5")//后面可任意增加
//Transition speed. 4000 = 4 seconds etc.
delay=4000;
//Nothing needs altering paste here.
l=new Array()
for (i=0; i < pics.length;i++){
l[i]=new Image()
l[i].src=pics[i]
}
n="progid:DXImageTransform.Microsoft.";
f=new Array()
f[0]="Wheel(spokes=4)";
f[1]="Blinds(Bands=10,direction=up)";
f[2]="Stretch(stretchstyle=PUSH)";
f[3]="Stretch(stretchstyle=SPIN)";
f[4]="RadialWipe(wipestyle=RADIAL)";
f[5]="RadialWipe(wipestyle=WEDGE)";
f[6]="Checkerboard(Direction=right,SquaresX=8,SquaresY=8)";
f[7]="Fade(Overlap=1.00)";
f[8]="GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)";
f[9]="Iris(irisstyle=CIRCLE,motion=out)";
f[10]="Iris(irisstyle=STAR,motion=out)";
f[11]="Barn( motion=out,orientation=vertical)";
f[12]="Barn( motion=in,orientation=vertical)";
f[13]="Strips(motion=leftup)";
f[14]="Slide(slidestyle=HIDE,Bands=1)";
f[15]="Slide(slidestyle=PUSH,Bands=1)";
f[16]="Slide(slidestyle=SWAP,Bands=1)";
f[17]="RandomDissolve(duration=1)";
imgstep=0;
function ani(){
rnd=f[Math.floor(Math.random()*f.length)]
box.style.filter=n+rnd;
box.filters[0].apply();
box.src="/l[imgstep].src";
box.filters[0].play();
imgstep++;
if (imgstep >= l.length) imgstep=0;
setTimeout("ani()",delay);
}
window.onload=new Function("setTimeout('ani()',delay)")
}
//-->
</script>
</body>
说明:
1:以上照片地址修改成自己的.
2:要求片片大小可随意,当然一致会更漂亮些
3:照片可以随意按顺序增加,
以下是代码片段：
1：彩色图片变黑白:
<img src=图片地址 style="filter:gray();" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
2：图片的左右反转:
<img src=图片地址 style="filter:fliph();" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
3：图片的上下反转:
<img src=图片地址 style="filter:flipv();" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
4：图片的透明化:
<img src=图片地址 style="filter: alpha(opacity=45,finishopacity=45);" border=0 width=图片宽 height=图片高>
//修改opacity=45,finishopacity=45处的数字,来决定透明度。
//以上代码加在<body>...</body>之间
5：图片的颜色反转:
拷贝下列代码?
<img src=图片地址 style="filter:invert;" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
以下是代码片段：
<body>
<script language="javascript">
<!--
if (document.all){
document.write('<img src="图片地址" id="box">');
}
//-->
</script></CENTER>
<script language="javascript">
<!--
if (document.all){
pics=new Array("图片地址1","图片地址2","图片地址3","图片地址4","图片地址5")//后面可任意增加
//Transition speed. 4000 = 4 seconds etc.
delay=4000;
//Nothing needs altering paste here.
l=new Array()
for (i=0; i < pics.length;i++){
l[i]=new Image()
l[i].src=pics[i]
}
n="progid:DXImageTransform.Microsoft.";
f=new Array()
f[0]="Wheel(spokes=4)";
f[1]="Blinds(Bands=10,direction=up)";
f[2]="Stretch(stretchstyle=PUSH)";
f[3]="Stretch(stretchstyle=SPIN)";
f[4]="RadialWipe(wipestyle=RADIAL)";
f[5]="RadialWipe(wipestyle=WEDGE)";
f[6]="Checkerboard(Direction=right,SquaresX=8,SquaresY=8)";
f[7]="Fade(Overlap=1.00)";
f[8]="GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)";
f[9]="Iris(irisstyle=CIRCLE,motion=out)";
f[10]="Iris(irisstyle=STAR,motion=out)";
f[11]="Barn( motion=out,orientation=vertical)";
f[12]="Barn( motion=in,orientation=vertical)";
f[13]="Strips(motion=leftup)";
f[14]="Slide(slidestyle=HIDE,Bands=1)";
f[15]="Slide(slidestyle=PUSH,Bands=1)";
f[16]="Slide(slidestyle=SWAP,Bands=1)";
f[17]="RandomDissolve(duration=1)";
imgstep=0;
function ani(){
rnd=f[Math.floor(Math.random()*f.length)]
box.style.filter=n+rnd;
box.filters[0].apply();
box.src="/l[imgstep].src";
box.filters[0].play();
imgstep++;
if (imgstep >= l.length) imgstep=0;
setTimeout("ani()",delay);
}
window.onload=new Function("setTimeout('ani()',delay)")
}
//-->
</script>
</body>
说明:
1:以上照片地址修改成自己的.
2:要求片片大小可随意,当然一致会更漂亮些
3:照片可以随意按顺序增加,
以下是代码片段：
1：彩色图片变黑白:
<img src=图片地址 style="filter:gray();" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
2：图片的左右反转:
<img src=图片地址 style="filter:fliph();" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
3：图片的上下反转:
<img src=图片地址 style="filter:flipv();" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
4：图片的透明化:
<img src=图片地址 style="filter: alpha(opacity=45,finishopacity=45);" border=0 width=图片宽 height=图片高>
//修改opacity=45,finishopacity=45处的数字,来决定透明度。
//以上代码加在<body>...</body>之间
5：图片的颜色反转:
拷贝下列代码?
<img src=图片地址 style="filter:invert;" border=0 width=图片宽 height=图片高>
//以上代码加在<body>...</body>之间
- 实现图片多变化的显像效果代码
- MTK 实现跑马灯多变效果代码机制
- MTK 实现跑马灯多变效果代码机制
- 一个Android实现图片的倒影效果的代码示例
- JavaScript实现图片的滑动切换效果 的Js代码
- JavaScript实现图片的滑动切换效果 的Js代码
- Jquery实现图片放大镜效果的思路及代码
- BBS多变个性贴图的实现，用ASP.NET网页动态生成图片
- javascript实现图片滚动效果代码
- FLEX: 代码实现图片文字动画效果
- Java代码实现图片水印效果
- 图片流动效果实现（代码）
- js实现图片轮番效果，原生代码
- MTK feature phone 跑马灯多变效果实现
- 基于jquery实现的上传图片及图片大小验证、图片预览效果代码！
- 实现图片抛物线的效果
- 图片阴影效果的实现
- 实现图片抛物线的效果
- 使用iText输出PDF文件
- 我过去的六年
- static inner class
- 我最喜爱的十大开发工具
- 什么是好的设计
- 实现图片多变化的显像效果代码
- HP-UNIX命令集合
- C#在Windows 2000 和2003中运行出现的错误:"试图运行项目进出错:未能加载文件或程序集..."
- weblogic学习笔记(-)
- Thinking in C++ (1-9) C++为什么会成功
- 零起点学VB做外挂（五）
- 项目开发的需求分析
- JavaScript笔记——JavaScript的系统函数学习
- VC读写INI文件(转)
