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 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
create-react-app开发常用配置教程
Jun 25 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python实现简单http服务器
2018/04/12 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python中退出多层循环的方法
2018/11/27 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL