这篇文章主要介绍了 js 实现图片从左往右渐变切换效果的方法, 是比较典型的图片渐变切换效果特效, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现图片从左往右渐变切换效果的方法。分享给大家供大家参考。具体实现方法如下:
- <style type="text/CSS">
- .woon{border:1px solid #fff;} .wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}
- </style>
- <script language="JavaScript" type="text/JavaScript">
- < !--window.onerror = function() {
- return true
- }
- function MM_openBrWindow(theURL, winName, features) { //v2.0
- window.open(theURL, winName, features);
- }
- //-->
- </script>
- <table width=500 border=0 align=center cellPadding=0 cellSpacing=0 background="http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">
- <tr>
- <td height="300" align="center">
- <div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:500px; HEIGHT:260px; border:1px solid #99cc66">
- <div style="display:block">
- <A href="#" target=_blank>
- <img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690"
- width=500 border=0>
- </A>
- </div>
- <div style="display: none">
- <a href="#" target="_blank">
- <img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690"
- width=500 border=0>
- </a>
- </div>
- <div style="display: none">
- <A href="#" target=_blank>
- <img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690"
- width=500 border=0>
- </A>
- </div>
- <div style="display: none">
- <a href="#" target=_blank>
- <img onmouseover=clearAuto(); onmouseout=setAuto() height=300 src="http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690"
- width=500 border=0>
- </a>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td height=100 valign="top">
- <table border=0 align=center cellPadding=0 cellSpacing=1 id=num>
- <tr>
- <td class=woon onmouseover=clearAuto();onclick=Mea(0); onmouseout=setAuto()>
- <img src="http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690" width="120"
- height="70" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')">
- </td>
- <td class=wooff onmouseover=clearAuto(); onclick=Mea(1); onmouseout=setAuto()>
- <img src="http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" width="120"
- height="70" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')">
- </td>
- <td class=wooff onmouseover=clearAuto(); onclick=Mea(2); onmouseout=setAuto()>
- <img src="http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" width="120"
- height="70" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')">
- </td>
- <td class=wooff onmouseover=clearAuto(); onclick=Mea(3); onmouseout=setAuto()>
- <img src="http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" width="120"
- height="70" style="cursor: hand" onDblClick="MM_openBrWindow('#','','')">
- </td>
- </table>
- <script>
- var n = 0;
- var showNum = document.getElementByIdx_x("num");
- function Mea(value) { n = value; setBg(value); plays(value);
- }
- function setBg(value) {
- for (var i = 0; i < 4; i++)
- if (value == i) { showNum.getElementsByTagName_r("td")[i].className = 'woon';
- }
- else { showNum.getElementsByTagName_r("td")[i].className = 'wooff';
- }
- }
- function plays(value) { with(fc) { filters[0].Apply();
- for (i = 0; i < 4; i++) i == value ? children[i].style.display = "block": children[i].style.display = "none"; filters[0].play();
- }
- }
- function clearAuto() {
- clearInterval(autoStart)
- }
- function setAuto() {
- autoStart = setInterval("auto(n)", 5000)
- }
- function auto() { n++;
- if (n > 3) n = 0; Mea(n);
- }
- function sub() { n--;
- if (n < 0) n = 3; Mea(n);
- }
- setAuto();
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: