js实现图片从左往右渐变切换效果的方法


Posted in Javascript onFebruary 06, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
js实现多选项切换导航菜单的方法
Feb 06 #Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 #Javascript
javascript强制点击广告的方法
Feb 06 #Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 #Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 #Javascript
触屏中的JavaScript事件分析
Feb 06 #Javascript
JavaScript事件委托技术实例分析
Feb 06 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
理解JavaScript中的事件
2006/09/23 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
javascript实现密码验证
2015/11/10 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
如何写好自荐信
2014/04/07 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
财务年终工作总结大全
2019/06/20 职场文书