我们平时在网页设计中常常会对图片进行一些特效设计，而通过JS实现图片特效是一种最为高效的方法，下面就来分享几款非常实用的JS图片特效，希望对大家有所帮助。
工具/原料
Dreamweaver
一、JS代码实现图片变形效果
1、在网页中可以通过CSS滤镜改变图片的显示方式，下面这个例子就是通过JS如何实现图片的变形效果。 本例的重点是css中“filter”滤镜的使用，“wave”属性表示以波浪的形式显示图片。 参数的说明如下：·Add：一般为1或0；·Freq：变形值；·Lightstrength：变形百分比；·Phase：角度变形百分比；·strengm：变形强度。
2、具体代码如下： <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>
二、JS代码实现图片的翻转效果
1、图片既可以通过滤镜也可以通过Photoshop进行特殊处理。本例介绍如何利用css的filter实现图片翻转。 本例的重点是CSS滤镜“filter：flipV”。“flipV”表示垂直翻转图片，如果修改为“flipHs”则表示水平翻转图片。
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>
三、JS代码实现图片的模糊效果
1、很多网站中图片的模糊效果使用Photoshop完成，其实CSS同样提供了实现模糊效果的虑镜。本例学习如何实现图片的模糊效果。 本例的重点是CSS的滤镜“filter：blur”，其中“blur”的语法如下所示：各参数的说明如下：·Add：一般为l或o；·Direction：角度，0～315度．步长为45度；·Strength：效果增长的数值．一般取5即可。
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:blur(add=0,direction=45,strength=10)" src="logo1.gif" width="160" height="103"> </p> </div> </font> <p align="center">这是图片的模糊效果</p></font></body></html>
四、JS代码实现图片的水印效果
1、图片的水印效果通过设置样式的透明变实现。本例以具体实例介绍如何将图片设置为水印样式。 本例的重点是CSS的“ofilter”滤镜效果：“alpha”用来设置透明层次，其使用语法如下所示： 各参数的说明如下：·Opacity：起始值，取值为0～100，0为透明，100为原图;·FinishOpacity：目标值；·Style：1、2或3；·StartX：任意值；·StartY：任意值。
2、具体代码如下： <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>
五、JS代码实现图片淡出淡隐
1、图片的透明度可以让图片具有特殊的效果。本例学习如何利用图片的透明特性实现淡出淡隐效果。 本例的重点是图片的透明度属性“opacity”。此属性在本例中通过CSS的滤镜完成，“filters．alpha．opacity”用来设置图片的样式，通过不断增加或减少图片的透明度实现淡出淡隐效果。
2、具体代码如下： <html xmlns=俨蓥蹋贴"http://www.w3.org/1999/xhtml" ><head><title>稆糨孝汶;标题页-学无忧（www.xue51.com）</title></head><body onLoad="fade()"><img src="logo1.gif" name="img" border=0alt="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>
六、JS代码实现图片的渐隐播放效果
1、单独实现一个图片的显示和隐藏比较容易，本例将介绍如何实现多个图片连续播放的效果，并在图片切换的时候使用逐渐消隐的特效。 本例的重点是滤镜结合定时器的使用。用滤镜“filter.alpha”实现图片的渐隐渐现，然后使用定时器“setTimeout”实现图片数组的调用。
2、具体代码如下： <HTML><挢旗扦渌;HEAD><TITLE>图像的渐隐播放效果</title><script language=javaScript>var strngth=1var index_image=0var 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浏览器时的特效实现方法 if(document.layers) { clearTimeout(timer) document.imagediv.document.write("<img src="+imageSrc[index_image]+" border=0>") document.close() index_image++ if (index_image >= imageSrc.length) {index_image=0} var timer=setTimeout("showimage()",2000) } }function hideimage() //隐藏图像{ if (strngth >=-10) { //设置图像逐渐消隐的滤镜效果-注意图像并不固定 imagediv.innerHTML="<img style='filter:alpha(opacity="+strngth+")' src="+imageSrc[index_image]+" border=0>"; strngth=strngth-10 var timer=setTimeout("hideimage()",100) //每隔100豪秒就隐藏图像 } else { clearTimeout(timer) index_image++ if (index_image >= imageSrc.length) {index_image=0} strngth=1 var timer=setTimeout("showimage()",500) //每隔500豪秒就显示图像 }}</script></HEAD><body onLoad="showimage()"><div id="imagediv" style="position:absolute;"></div></body></HTML>
七、JS代码实现文字环绕图片
1、在Word文档的制作过程中经常会遇到图片和文字都存在的情况，为了版面更合理通常需要特殊的效果，如文字环绕图片。本例就学习如何使文字环绕图片。 本例的重点是样式表中的“clear”：在一个大容器内如果定义了float元素(本例中img图片定义了float样式)，那么后面的元素会与其一起分享大容器剩下的宽度．如果既不想和float一起同行显示，又不想在浏览器中错位，那就得用到”clear：both”取消所有浮动。
2、具体代码如下： <html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>无标题页</title></head><body><div style="background:#EEEEEE;padding:10px;width:240px;"><img src="logo1.gif" width=100 height=95 id=img1 style="float:right;"><div id="mydiv" style="clear:none;">国家环保总局宣布今起松花江进入为期十年的“休养期”，并提出70条具体的治理措施，其中包括停止审批所有从松花江流域向外流域的调水工程,逐步淘汰松花江流域钢铁、电力、焦炭、造纸等行业的落后生产能力。</div></body></html>
八、JS实现图片切换的特殊效果
1、为了增加页面的美观性，在进行图片切换时通常使用类似幻灯片的效果。本例介绍如何实现这种图片切换的特殊效果。 本例的重点是调用了CSS中的滤镜“revealTrans”，“transition”参数表示图片切换的样式，如可以是卷帘、溶解等效果，其取值局限于I～23之间。
2、具体代码如下： <html xmlns=俨蓥蹋贴"http://www.w3.org/1999/xhtml" ><head><title>稆糨孝汶;无标题页-学无忧（www.xue51.com）</title><script language="javascript">var imgUrl=new Array();var imgLink=new Array();var adNum=0;var jumpUrl="http://pic.music.tom.com/view/35611/tid-35611-pid-1.html";imgLink[1]="http://pic.music.tom.com/view/35611";imgLink[2]="http://pic.music.tom.com";imgUrl[1]="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg";imgUrl[2]="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg";var imgPre=new Array();var j=0;for (i=1;i<=imgUrl.length-1;i++) {if(imgLink[i]!="") {j++;} else {break;}}function playTran(){if (document.all)imgInit.filters.revealTrans.play();}var key=0;//循环显示图片function nextAd(){if(adNum<j)adNum++ ;else adNum=1;if( key==0 ){key=1;} else if (document.all){imgInit.filters.revealTrans.Transition=6;imgInit.filters.revealTrans.apply();playTran();}document.images.imgInit.src=imgUrl[adNum];jumpUrl=imgLink[adNum];theTimer=setTimeout("nextAd()", 7000);}//单击图片时实现导航function goUrl(){ if (jumpUrl != ''){if (jumpTarget != '') window.open(jumpUrl,'_blank');else location.href=jumpUrl;}}</script></head><body><a href="javascript:goUrl()"><img style="FILTER:revealTrans(duration=2,transition=7);border:1 solid black" src="javascript:nextAd()" width="300" border="0" name="imgInit" height="210"></a></body></html>
九、JS实现晃动的图片
1、文字可以实现左右滚动，图片也可以实现左右移动。本例介绍一个图片左右移动的特效。 本例的重点是定时器和随机数的应用。定时器用来不断移动图片，随机数的获取是使用“Math.random”函数。“Math．round”是四舍五人函数，返回一个伪随机数(0～1之间的double数)。
2、具体代码如下： <html xmlns=俨蓥蹋贴"http://www.w3.org/1999/xhtml" ><head><title>稆糨孝汶;标题页</title><script language="JavaScript">step = 0;obj = new Image(); //创建图片对象function anim(xp,xk,smer) //smer 代表晃动方向{obj.style.left = x;x += step*smer;if (x>=(xk+xp)/2) { if (smer == 1) step--; //往左移动 else step++; }else { if (smer == 1) step++; //往右移动 else step--; }if (x >= xk) { //如果已经到右边界，则反向晃动 x = xk; smer = -1; } if (x <= xp) { //如果一定到左边界，则反向晃动 x = xp; smer = 1; }setTimeout('anim('+xp+','+xk+','+smer+')', 40); //设置定时器，实现不断晃动效果} function moveLR(objID,movingarea_width,c){ if (navigator.appName=="Netscape") window_width = window.innerWidth; else window_width = document.body.offsetWidth; //获取窗体的宽度obj = document.images[objID]; image_width = obj.width; //获取图像的宽度x1 = obj.style.left; //获取图像的X坐标x = Number(x1.substring(0,x1.length-2)); //去掉后面的像素标记“px”if (c == 0) { if (movingarea_width == 0) { //没有设置移动区域的情况 right_margin = window_width - image_width; anim(x,right_margin,1); //开始晃动图片} else { right_margin = x + movingarea_width - image_width; if (movingarea_width < x + image_width) window.alert("No space for moving!"); else anim(x,right_margin,1);}}else { if (movingarea_width == 0) //没有设置移动区域的情况 right_margin = window_width - image_width; else { x = Math.round((window_width-movingarea_width)/2); right_margin = Math.round((window_width+movingarea_width)/2)-image_width;//获取可以移动的空间}anim(x,right_margin,1);} }</script><img src="http://www.baidu.com/img/logo.gif" name="img1" style='position: absolute; top: 50px; left: 213px;' border=0 id="myImg"> <script language="JavaScript">setTimeout("moveLR('myImg',400,1)",10);</script></head><body></body></html>
十、JS实现定时消失的图片
1、为了不用经常更新网站，可以为一些图片和文本设置有效期，有效期过后这些图片或文本自动消失。本例通过JavaScript提供的“Dale”对象，实现图片的定时消失。 本例的重点是．JavaScript的Date对象。“new Date”用来创建一个新的日期对象，也就是当前日期。而“newDate(指定日期)”则是将指定的日期转换为日期对象。“getTime”方法返回一个整数值，此值是一个单位是毫秒的时间间隔。这段时间间隔是从1970年1月1日到指定的日期的时间。
2、具体代码如下： <html xmlns=俨蓥蹋贴"http://www.w3.org/1999/xhtml" ><head><title>稆糨孝汶;标题页-学无忧（www.xue51.com）</title><script LANGUAGE="JavaScript">function view(cDays, cDate){ var oldDate = new Date(cDate); //将指定的日期转换为标准日期型 var newDate = new Date(); //获取今天的日期 var maxtime = cDays*24*60*60*1000; //将指定日期换算为毫秒 var psj=0; if ((newDate.getTime()-oldDate.getTime()) <= maxtime) //判断日期是否还在指定时间内 { //动态显示指定的图片 document.write("<img src='http://www.google.cn/intl/zh-CN/images/logo_cn.gif' width=400 height=100 ALIGN=MIDDLE Alt='myimg'>"); }}view(7,"05/31/2008") //调用图片定时消失的方法</script></head><body></body></html>
