快捷導(dǎo)航

完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(二)

更新時(shí)間：2017年03月08日 17:16:49 作者：Vampire-blog

這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果，通過(guò)設(shè)置定時(shí)器實(shí)現(xiàn)延時(shí)0.5s切換選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js選項(xiàng)卡切換的具體代碼，供大家參考，具體內(nèi)容如下

通過(guò)設(shè)置定時(shí)器實(shí)現(xiàn)延時(shí)0.5s切換，一個(gè)重要的技巧是定義了一個(gè)that變量來(lái)存放當(dāng)前指針this。

之所以不能在這直接引用this是因?yàn)閟etTimeout是window對(duì)象，用this的話會(huì)指向定時(shí)器，所以要在前面定義一個(gè)變量。
還要注意調(diào)用定時(shí)器前要判斷是否存在準(zhǔn)備執(zhí)行的定時(shí)器。

效果如圖：

具體代碼：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>延時(shí)切換</title>
 <style type="text/css">
  *{margin: 0;padding: 0;font: normal 12px "微軟雅黑";color: #000000;}
  ul{list-style-type: none;}
  a{text-decoration: none;}
  #tab-list{width: 275px;height: 190px;margin: 20px auto;}
  #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
  #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;
   border: 1px solid #999;border-bottom: none;margin-left: 5px;}
  #ul1 li:hover{cursor: pointer;}
  #ul1 li.active{border-top: 2px solid #8B4513;border-bottom: solid 2px #ffffff;}
  #tab-list div{border: 1px solid #7396B8;border-top: none;}
  #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
  .show{display: block;}.hide{display: none;}
 </style>
 <script type="text/javascript">
  window.onload=function(){
   var ul1=document.getElementById('ul1');
   var aLi=ul1.getElementsByTagName('li');
   var oDiv=document.getElementById('tab-list');
   var aDiv=oDiv.getElementsByTagName('div');
   var timer=null;
   for(var i=0;i<=aLi.length;i++){
    aLi[i].id=i;
    aLi[i].onmouseover=function(){
     var that=this;//用that這個(gè)變量來(lái)引用當(dāng)前滑過(guò)的li
     //如果存在準(zhǔn)備執(zhí)行的定時(shí)器，立即清除，只能當(dāng)前停留時(shí)間大于500ms時(shí)才開(kāi)始執(zhí)行（指鼠標(biāo)快速滑過(guò)一個(gè)的那一瞬間要清除掉產(chǎn)生的定時(shí)器）
     if(timer){
      clearTimeout(timer);
      timer=null;
     }
     //延時(shí)半秒執(zhí)行
     timer=window.setTimeout(function(){
      for(var i=0;i<aLi.length;i++){
       aLi[i].className="";
       aDiv[i].className="hide";
      }
      that.className="active";//之所以不能在這直接引用this是因?yàn)閟etTimeout是window對(duì)象，用this的話會(huì)指向定時(shí)器，所以要在前面定義一個(gè)變量
      aDiv[that.id].className="show";
     },500);
    }
   }
  }
 </script>
</head>
<body>
<div id="tab-list">
 <ul id="ul1">
  <li class="active">房產(chǎn)</li><li>家居</li><li>二手房</li>
 </ul>
 <div>
  <ul>
   <li><a href="javascript:;">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</a></li>
   <li><a href="javascript:;">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a></li>
   <li><a href="javascript:;">北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</a></li>
   <li><a href="javascript:;">京樓盤直降5000 中信府 公園樓王現(xiàn)房</a></li>
  </ul>
 </div>
 <div class="hide">
  <ul>
   <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li>
   <li><a href="javascript:;">經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</a></li>
   <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li>
   <li><a href="javascript:;">瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</a></li>
  </ul>
 </div>
 <div class="hide">
  <ul>
   <li><a href="javascript:;">通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</a></li>
   <li><a href="javascript:;">西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</a></li>
   <li><a href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</a></li>
   <li><a href="javascript:;">獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a></li>
  </ul>
 </div>
</div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: