js 操绘制片的各种效果 第一篇
日期：2014-05-16 浏览次数：20526 次
js 操作图片的各种效果 第一篇
1，?图片的变形效果
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<p><font face="Arial" color="#008080">
<div><p align="center">
<img style="filter:wave(add=0,freq=1,lightStrength=20,phase=50,strength=20)" src="LOGO1.gif" width="160" height="103">
</p> </div> </font>
<p align="center">这是图片的变形效果</p></font>
</body>
</html>
?
2，图片的翻转效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<p><font face="Arial" color="#008080">
<div><p align="center">
<img style="filter:flipV" src="logo1.gif" width="160" height="103"> </p>
</div>
</font>
<p align="center">这是图片的翻转效果</p></font>
</body>
</html>
?
3，图片的模糊效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<p><font face="Arial" color="#008080">
<div><p align="center">
<img style="filter:blur(add=0,direction=45,strength=10)" src="logo1.gif" width="160" height="103"> </p>
</div>
</font>
<p align="center">这是图片的模糊效果</p></font>
</body>
</html>
4，图片的水印效果
?
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<p><font face="Arial" color="#008080">
<div><p align="center">
<img style="filter:alpha(opacity=10,finishOpacity=10,style=10,startX=10,startY=10,finishX=20,finishY=30,add=0,direction=45,strength=10)" src="logo1.gif" width="160" height="103"> </p>
</div>
</font>
<p align="center">这是图片的水印效果</p></font>
</body>
</html>
?5,图片的淡入淡出
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body onLoad="fade()">
<img src="logo1.gif" name="img" border=0
alt="Image" style="filter:alpha(opacity=0)">
<script language="JavaScript">
var bOpa = 1;
var c = true;
function fade()
{
if(document.all);
if(c == true) {
bOpa++;
}
if(bOpa==100) { //透明度到100时，开始减少
bOpa--;
c = false
}
if(bOpa==10) { //透明度到10时，控制透明度增减的参数变为true
bOpa++;
c = true;
}
if(c == false) { //控制透明度是加还是减
bOpa--;
}
img.filters.alpha.opacity=0 + bOpa; //改变图像的透明度
setTimeout("fade()",50); //定时执行fade方法
}
</script></body>
</html>
?
6，图片的渐隐播放效果
<HTML>
<HEAD>
<TITLE>图像的渐隐播放效果</TITLE>
<script language=javaScript>
var strngth=1
var index_image=0
var imageSrc = new Array()
imageSrc[0] ="logo1.gif"
imageSrc[1] ="logo2.gif"
imageSrc[2] ="logo1.gif"
function showimage() //显示图像
{
if(document.all) {
//创建一个带滤镜样式的img图像-注意显示的图像并不固定
if (strngth <=110) {
imagediv.innerHTML="<img style='filter:alpha(opacity="+strngth+")' src="+imageSrc[index_image]+" border=0>";
strngth=strngth+10
var timer=setTimeout("showimage()",100) //每隔100豪秒就显示图像
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000) //每隔1000豪秒就隐藏图像
}
}
//是Netscape浏览
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
