js实现图片从左往右渐变切换效果的方法
作者:bea
本文实例讲述了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);} &
本文实例讲述了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程序设计有所帮助。
有用 | 无用
代码如下:
<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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript实现获取dom中class的方法
- angularJS 中input示例分享
- angularJS提交表单(form)
- JavaScript实现16进制颜色值转RGB的方法
- js选项卡的实现方法
- js实现checkbox全选、不选与反选的方法
- angularJS中router的使用指南
- javascript实现按回车键切换焦点
- jquery中ajax使用error调试错误的方法
- JQuery中extend的用法实例分析
- jQuery中noConflict()用法实例分析
- jquery实现聚光灯效果的方法
- js实现Select下拉框具有输入功能的方法
- JQuery中serialize()用法实例分析
- jQuery中on()方法用法实例详解
- JS实现文字向下滚动完整实例
- jquery中filter方法用法实例分析
- Jquery对select的增、删、改、查操作
- JavaScript常用的弹出广告及背投广告实现方法