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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
js模拟微博发布消息
Feb 23 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
jquery自定义组件实例详解
Dec 31 jQuery
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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
js判断两个日期是否相等的方法
2013/09/10 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python实现Restful API的例子
2019/08/31 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
基于python 凸包问题的解决
2020/04/16 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
《小猫刮胡子》教学反思
2014/02/21 职场文书
家长通知书家长评语
2014/04/17 职场文书
贷款承诺书范文
2014/05/19 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android