教你用代码 特效处理图片效果

 

 

一、贴图的基础代码

代码为:  <IMG src="uploadpic/2005111175152608.jpg" width=350>

 

二、淡化边缘效果

代码为:  <IMG style="FILTER: Alpha(opacity=100,style=1)" src="uploadpic/2005111175152608.jpg" width=350>

 

 

 

代码为:  <IMG style="FILTER: Alpha(opacity=100,style=2)" src="uploadpic/2005111175152608.jpg" width=350>

 

 

代码为:  <IMG style="FILTER: Alpha(opacity=100,style=3)" src="uploadpic/2005111175152608.jpg" width=350>

 

 

代码为:  <IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="uploadpic/2005111175152608.jpg" width=350>

 

三、图片加框效果

 代码为:

1、 <img src="uploadpic/2005111175152608.jpg" width=350 style="border:8px #987cb9 dotted">

2、  <IMG style="BORDER-RIGHT: #987cb9 8px dotted; BORDER-TOP: #987cb9  8px dotted; BORDER-LEFT: #987cb9  8px dotted; BORDER-BOTTOM: #987cb9  8px dotted" src="uploadpic/2005111175152608.jpg">

 

 

代码为:  <img src="uploadpic/2005111175152608.jpg" width=350 style="border:12px #987cb9 double">

 

 

代码为:  < align=center><img src="uploadpic/2005111175152608.jpg" width=350 style="border:5px #987cb9 dashed">

 

 

代码为:  <img src="uploadpic/2005111175152608.jpg" width=350 style="border:12px #987cb9 groove">

 

 

代码为:  <DIV align=center>
<TABLE style="BORDER-RIGHT: #6a5acd 3px dashed; BORDER-TOP: #6a5acd 3px dashed; BORDER-LEFT: #6a5acd 3px dashed; BORDER-BOTTOM: #6a5acd 3px dashed" cellSpacing=5 cellPadding=0 align=center bgColor=#9400d3>
<TBODY>
<TR>
<TD align=middle width=350 bgColor=#6495ed><IMG src="uploadpic/2005111175152608.jpg"></TD></TR></TBODY></TABLE></DIV>

 

XImageTransform.Microsoft.Glow(color=#cc8888,strength=10)" src="http://xz2.2000y.net/314311/uploadpic/2005111175152608.jpg">

代码为:   <img src="uploadpic/2005111175152608.jpg" style="filter:progidXImageTransform.Microsoft.Glow(color=#cc8888,strength=10)">

四、图片移动效果

代码为:  <MARQUEE direction=right  scrollamount=10><IMG src="uploadpic/2005111175152608.jpg"></MARQUEE>

说明:direction=right表示图片自左向右移动,direction=left表示自右向左移动,也可缺省.direction=up表示图片自下而上移动,direction=down表示自上往下移动.

 

 

代码为:  <marquee width=100% behavior=alternate scrollamount=10><img src=uploadpic/2005111175152608.jpg width=350 ></marquee>

 

 

代码为:  <marquee width=100% behavior=slide scrollamount=10><img src=uploadpic/2005111175152608.jpg width=350 ></marquee>

 

 

代码为:  <marquee direction=left><marquee behavior=alternate direction=up height=500><img src=uploadpic/2005111175152608.jpg> </marquee>

 

 

代码为:  <marquee width=350 ><img src=uploadpic/2006102421152447531.jpg width=350>  </marquee><marquee direction=right width=350 ><img src=uploadpic/2005111175152608.jpg width=350>  </marquee>

 

 

代码为:  <marquee direction=down scrollamount=3> <center> <div style="width:350;filter:flipv;"><img src="uploadpic/2005111175152608.jpg" width=350></div></center></marquee>

 

 

代码为:
<MARQUEE scrollAmount=3 direction=right behavior=alternate>
<MARQUEE direction=up behavior=alternate width=100 height=500>
< align=center><IMG src="uploadpic/2005111175152608.jpg"></MARQUEE>

 

 

代码为: 

<TABLE cellSpacing=0 cellPadding=0 width="50%" align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="uploadpic/2005111175152608.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="uploadpic/2005111175152608.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="uploadpic/2005111175152608.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="uploadpic/2005111175152608.jpg" width=175></MARQUEE></TD></TR></TBODY></TABLE>

 

 

代码为:1、 <MARQUEE direction=right  scrollamount=10><IMG style="FILTER: Alpha(opacity=100,style=2)" src="uploadpic/2005111175152608.jpg"> </MARQUEE>

  2、 <MARQUEE direction=right  scrollamount=10 >
<TABLE style="FILTER: Alpha(opacity=100,style=2)"  width=350 height=263 background=uploadpic/2005111175152608.jpg > </MARQUEE>

代码为: <MARQUEE style="WIDTH: 1000px " scrollAmount=5 direction=right>
 <img src="uploadpic/2005111175152608.jpg"  width=350  style="border:8px #987cb9 dotted"></MARQUEE>

 

五、图片的另外一些滤镜效果

代码为:  <IMG height=232 src="uploadpic/2005111175152608.jpg" width=310><BR><IMG id=reflection style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()" height=232 src="uploadpic/2005111175152608.jpg" width=310>

XImageTransform.Microsoft.Emboss()" src="http://wz.pcrpcs.com/449972/uploadpic/2006102421152447531.jpg">

代码为:  <IMG style="FILTER: progidXImageTransform.Microsoft.Emboss()" src="uploadpic/2005111175152608.jpg">

 

代码为:  <IMG style="FILTER: gray" src="uploadpic/2005111175152608.jpg">

代码为:  <img src="uploadpic/2005111175152608.jpg" style="filter:invert">

 

六、用JavaScript实现的其它图片效果

代码：

< align=center><STRONG><FONT color=#008b8b></FONT></STRONG>&nbsp;</P>
<P align=center>
<SCRIPT language=JavaScript>
i=0;
function f_wave()
{i=i-4;
ShowCool.style.filter="Wave(Freq=1,LightStrength=80,Phase=" + i + ")";
setTimeout("f_wave()",100);
}
window.onload=f_wave;</SCRIPT>
<STRONG><FONT color=#008b8b><IMG id=ShowCool style="FILTER: Wave(Freq=1,LightStrength=80,Phase=-11384)" height=263 src="uploadpic/2005111175152608.jpg" width=350></FONT></STRONG> <BR>
<P align=center>
<SCRIPT language=JavaScript>
var b = 1;
var c = true;
function helpor_net(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("helpor_net()",50);
}
helpor_net();
</SCRIPT>
</P>

 

 

 

代码：

<P align=center><IMG style="FILTER: alpha(opacity=0)" src="uploadpic/2005111175152608.jpg" border=1 name=u>
<SCRIPT language=JavaScript>
var b = 1;
var c = true;
function helpor_net(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("helpor_net()",50);
}
helpor_net();
</SCRIPT>
 </P>
 

教程很实用，今天才弄懂神奇图片效果是怎么来的