欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法

 更新時(shí)間:2015年02月06日 11:29:57   作者:飛雪  
這篇文章主要介紹了js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法,是比較典型的圖片漸變切換效果特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:

復(fù)制代碼 代碼如下:

<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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • JS實(shí)現(xiàn)彈出居中的模式窗口示例

    JS實(shí)現(xiàn)彈出居中的模式窗口示例

    這篇文章主要介紹了JS實(shí)現(xiàn)彈出居中的模式窗口,涉及javascript模式窗口及頁(yè)面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密的腳本分享

    JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密的腳本分享

    MD5信息摘要算法是一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值(hash value),用于確保信息傳輸完整一致。本文將用JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密,感興趣的可以了解一下
    2022-10-10
  • javascript作用域問(wèn)題實(shí)例分析

    javascript作用域問(wèn)題實(shí)例分析

    本文給大家分享的是個(gè)人在使用json數(shù)據(jù)生成樹(shù)狀目錄的時(shí)候,由于作用域問(wèn)題處理不當(dāng)引起的一個(gè)小BUG的修復(fù)過(guò)程,小伙伴們需要的話可以參考下。
    2015-07-07
  • JavaScript中reduce()的用法實(shí)例

    JavaScript中reduce()的用法實(shí)例

    reduce()方法接收一個(gè)函數(shù)作為累加器(accumulator),數(shù)組中的每個(gè)值(從左到右)開(kāi)始縮減,最終為一個(gè)值,下面這篇文章主要給大家介紹了關(guān)于JavaScript中reduce()的用法實(shí)例,需要的朋友可以參考下
    2022-05-05
  • JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼

    JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼

    這篇文章主要介紹了JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換元素樣式的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-09-09
  • JS常用跨域方法實(shí)現(xiàn)原理解析

    JS常用跨域方法實(shí)現(xiàn)原理解析

    這篇文章主要介紹了JS常用跨域方法實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-12-12
  • ECMAScript6塊級(jí)作用域及新變量聲明(let)

    ECMAScript6塊級(jí)作用域及新變量聲明(let)

    這篇文章主要介紹了ECMAScript6塊級(jí)作用域及新變量聲明(let) 的相關(guān)資料,需要的朋友可以參考下
    2015-06-06
  • Bootstrap的class樣式小結(jié)

    Bootstrap的class樣式小結(jié)

    本文給大家總結(jié)了bootstrap的class樣式,由基礎(chǔ)到內(nèi)涵給大家介紹的非常詳細(xì),需要的的朋友可以參考下
    2016-12-12
  • 原來(lái)JS還可以這樣拆箱轉(zhuǎn)換詳解

    原來(lái)JS還可以這樣拆箱轉(zhuǎn)換詳解

    這篇文章主要給大家介紹了關(guān)于JS拆箱轉(zhuǎn)換的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • JavaScript分析、壓縮工具JavaScript Analyser

    JavaScript分析、壓縮工具JavaScript Analyser

    這篇文章主要介紹了JavaScript分析、壓縮工具JavaScript Analyser,需要的朋友可以參考下
    2014-12-12

最新評(píng)論