亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果（懸停、下方橫線動(dòng)畫位移）

 更新時(shí)間：2017年05月05日 11:34:05   作者：Hailinlu  
這篇文章主要介紹了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果，實(shí)現(xiàn)懸停、下方橫線動(dòng)畫位移，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

同時(shí)實(shí)現(xiàn)懸停、下方橫線動(dòng)畫位移：

代碼：

<sytle>
　　*{margin:0;padding:0; }
　　.box{position:relative;font-size:0;}
　　.box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-size:16px;}
　　.line{position:absolute;width:150px;height:3px;background:#059;left:0;bottom:0;}
</style>
<div class="box" id="switch">
 <span class="current">新聞資訊</span>
  <span>公司動(dòng)態(tài)</span>
 <div class="line"></div>
</div> 

$(function(){
 var $spans=$("#switch span");
 $spans.click(function(){
 　　$(this).addClass('current').siblings().removeClass('current');
  var index=$spans.index(this);   
  //$("#content .detail").eq(index).show().siblings().hide();
  //$("#fr .bar").eq(index).show().siblings().hide();
 })
    
 $spans.mouseover(function(){
  var index=$spans.index(this);
  var cName=$(this).attr("class");
  if(cName!="current"){
   if(index==0){
    $('.line').animate({'left':'0px'},300);
   }else{
    $('.line').animate({'left':'150px'},300);
   }
  }    
 })
 $spans.mouseout(function(){
  var index=$spans.index(this);
  var cName=$(this).attr("class");
  if(cName!="current"){
   if(index==0){
   $('.line').animate({'left':'150px'},300);
   }else{
   $('.line').animate({'left':'0px'},300);
   }
 　　 }      
 })
}）

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

相關(guān)文章

最新評(píng)論