jquery實現滑動門效果詳解

admin發表於2017-04-01
jQuery

本章節將詳細分解一段程式碼例項，它利用jquery實現了簡單的滑動門效果。

當然程式碼比較簡單，實際應用的時候還需要再進行完善，不過掌握原來才是最重要的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
 font-size:12px;
}
dl {
 margin:10px auto;
 width:500px;
 line-height:24px;
 border-left:1px solid #dcdcdc;
}
dt.active {
 border-bottom:1px solid #fff;
 position:relative;
}
dt {
 padding:0 10px;
 float:left;
 border:1px solid #dcdcdc;
 border-left:0;
 cursor:pointer;
 margin-bottom:-1px;
}
dd {
 clear:both;
 width:100%;
 border-left:0;
 border:1px solid #dcdcdc;
 border-left:0;
 display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('dt:first').addClass('active');
  $('dd:first').css('display','block');
  autoroll();
  hookThumb();
});
var i=-1; //第i+1個tab開始
var offset = 2500; //輪換時間
var timer = null;
function autoroll(){
  n = $('dt').length-1;
  i++;
  if(i > n){
    i = 0;
  }
  slide(i);
  timer = window.setTimeout(autoroll, offset);
}
function slide(i){
  $('dt').eq(i).addClass('active').siblings().removeClass('active');
  $('dd').eq(i).css('display','block').siblings('dd').css('display','none');
}
function hookThumb(){    
  $('dt').hover(function () {
    if (timer) {
      clearTimeout(timer);
      i = $(this).prevAll().length;
      slide(i); 
    }
  },function () {
    timer = window.setTimeout(autoroll, offset);  
    this.blur();            
    return false;
  }); 
}
</script>
</head>
<body>
<dl>
  <dt>div教程</dt>
  <dt>css教程</dt>
  <dt>json教程</dt>
  <dd>螞蟻部落歡迎您</dd>
  <dd>softwhy.com</dd>
  <dd>只有努力奮鬥才會有美好明天</dd>
</dl>
</body>
</html>

上面的程式碼實現了我們的要求，下面就詳細介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$('dt:first').addClass('active')，為第一個dt元素新增名為active的樣式類。

（3）.$('dd:first').css('display','block')，顯示第一個dd元素，和上面的語句結合起來就是預設第一個滑動門選中效果。

（4）autoroll()，此函式可以實現自動播放滑動門效果。

（5）.hookThumb()，實現滑鼠懸浮滑動門切換效果。

（6）.var i=-1，第i+1個tab開始。

（7）.var offset = 2500，規定滑動門自動切換時間。

（8）.var timer = null，作為定時器函式的標誌。

（9）.function autoroll(){}，此函式實現了滑動門自動切換效果。

（10）.n = $('dt').length-1，獲取的是最大索引值。

（11）.i++,索引值加1.

（12）.if(i > n){

  i = 0;

}，如果超出最大索引，那麼就歸零。

（13）.slide(i)，此函式可以實現滑動門切換效果,i引數是索引值。

（14）.$('dt').eq(i).addClass('active').siblings().removeClass('active')，為當前指定索引選項卡新增active樣式類，其他的消除。

（15）.$('dd').eq(i).css('display','block').siblings('dd').css('display','none')，將指定索引元素顯示，其他的兄弟元素隱藏。

（16）.function hookThumb(){}，此函式能夠實現滑鼠懸浮切換效果。

（17）.$('dt').hover(function () {

  if (timer) {

    clearTimeout(timer);

    i = $(this).prevAll().length;

    slide(i); 

  }

  },function () {

  timer = window.setTimeout(autoroll, offset);  

  this.blur();            

  return false;

})，當滑鼠懸浮能夠切換到相應的選項卡，並停止自動滑動門效果。

二.相關閱讀:

（1）.addClass()方法可以參閱jQuery addClass()一章節。

（2）.$('dt:first')可以參閱jQuery :first一章節。

（3）.setTimeout()方法可以參閱setTimeout()一章節。

（4）.eq()方法可以參閱jQuery eq()一章節。

（5）.siblings()方法可以參閱siblings()一章節。

（6）.removeClass()方法可以參閱jQuery removeClass()一章節。

（7）.prevAll()方法可以參閱jQuery prevAll()一章節。

相關文章