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 通过json自动生成Dom的代码
Apr 01 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
Symfony核心类概述
2016/03/17 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
javascript实用方法总结
2015/02/06 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
jQuery实现滑动开关效果
2020/08/02 jQuery
Python中time模块和datetime模块的用法示例
2016/02/28 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
openCV提取图像中的矩形区域
2020/07/21 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
幼儿园母亲节活动方案
2014/03/10 职场文书
安全责任协议书
2014/04/21 职场文书
三严三实对照检查材料
2014/08/25 职场文书
给校长的一封检讨书
2014/09/20 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
学习保证书100字
2015/02/26 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书