Jquery 패키지 tab 자동 전환 효과 의 구체 적 인 구현

7100 단어 tab전환 하 다.효과.
오늘 제 가 있 는 이곳 은 인터넷 속도 가 정말 느 립 니 다.웹 페이지 를 열 려 면 오래 기 다 려 야 합 니 다.하지만 글 을 쓰 고 싶 습 니 다.-tab 자동 전환 은 업무 중 에 이런 문제 에 자주 부 딪 히 기 때문에 블 로 그 를 쓰 는 것 도 정리 하 는 가장 중요 한 것 은 공유 할 수 있 고 나중에 비슷 한 것 을 만 날 수 있 으 니 참고 하 세 요!물론 이것 은 제 가 Jquery 로 봉 인 된 페이지 입 니 다.여러 번 호출 할 수 있 습 니 다.                new tabSlider(obj,count); obj 는 용기 의 가장 바깥쪽 ID 를 말 합 니 다.count 는 여러 개의 li 를 말 합 니 다.당연히 제 js 를 인용 하려 면 제 구조 에 따라 써 야 합 니 다!다음은 제 HTML 의 일부 구 조 는 다음 과 같 습 니 다.

<div id="tab1">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="content hide">tab2</div>
        <div class="content hide">tab3</div>
        <div class="content hide">tab4</div>
    </div>
</div>
구 조 는 이 렇 습 니 다!다음은 제 페이지 의 HTML/CSS 코드 입 니 다!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
#tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;} 
#tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;} 
.menu{ width:196px; height:18px; margin:0; padding:0;} 
.menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;} 
.menu li.current{ border-bottom:none;} 
.content-main{ width:196px; height:200px; overflow:hidden;} 
.content{ width:196px; height:200px; overflow:hidden; display:block;} 
.hide{ display:none;width:196px; height:200px; overflow:hidden;} 
.menu li.last-col{ border-right:none; width:49px;} 
</style>
<script src="AutoTab.js"></script>
</head>
<body>
<div id="tab1">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="hide">tab2</div>
        <div class="hide">tab3</div>
        <div class="hide">tab4</div>
    </div>
</div>
<br /><br />
<div id="tab2">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="hide">tab2</div>
        <div class="hide">tab3</div>
        <div class="hide">tab4</div>
    </div>
</div>
<script>new tabSlider("#tab1",4);</script>
<script>new tabSlider("#tab2",4);</script>
</body>
</html>
JS 코드 는 다음 과 같 습 니 다.

// JavaScript Document 
    /* 
    *@date 2011 10 24 
    *@ author tugenhua 
    *@ email [email protected] 
    *@            
          */
    <div id="tab1"> 
    <ul class="menu"> 
        <li class="current">tab1</li> 
        <li>tab2</li> 
        <li>tab3</li> 
        <li class="last-col">tab4</li> 
    </ul> 
    <div class="content-main"> 
        <div class="content">tab1</div> 
        <div class="content hide">tab2</div> 
        <div class="content hide">tab3</div> 
        <div class="content hide">tab4</div> 
    </div> 
</div> 
/*        
    new tabSlider("#tab1",4); 
    #tab1    ID,4         li 
*/
function tabSlider(obj,count){ 
    var _this = this; 
        _this.obj = obj; 
        _this.count = count; 
        _this.time = 2000;//      
        _this.n = 0; 
        var  t; 
        this.slider = function(){ 
            $(_this.obj + " .menu li").bind("mouseover",function(event){ 
                $(event.target).addClass("current").siblings().removeClass("current"); 
                var index = $(_this.obj + " .menu li").index(this); 
                $(_this.obj + " .content-main .content").eq(index).show().siblings().hide(); 
                _this.n = index;     
            })   
        } 
        this.addhover = function(){ 
            $(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});  
        } 
        this.autoplay = function(){ 
            _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n; 
            $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");     
        }    
        this.factory = function(){ 
            this.slider(); 
            this.addhover(); 
            t = setInterval(this.autoplay,_this.time);   
        } 
        this.factory(); 
}
다음은 제 가 이 js 를 포장 하 는 방향 을 말씀 드 리 겠 습 니 다.모든 프로그램의 방향 을 쓰 는 것 이 가장 중요 하기 때문에 코드 를 잘 생각 할 수만 있다 면 반드시 실현 할 수 있 습 니 다!생각 이 더 듣 기 좋 은 말 은 바로 우리 가 자주 말 하 는'알고리즘'이다!1 function tabSlider(obj,count){}이 js 로 봉인 한 후 매개 변 수 를 입력 하 십시오!HTML 페이지 에 있 을 때 tabSlider(obj,count)를 직접 호출 하면 됩 니 다!2.일부 인 자 를 초기 화하 고 이 함수 에 함수 this.slider=function(){}mouseover 이 벤트 를 연결 합 니 다.첫 번 째 li 를 초기 화 할 때 현재 div 내용 이 현재 li 와 같은 지침 을 가리 키 는 지 찾 습 니 다.같은 내용 이 표시 되면!다른 숨 김!3 사용자 정의 this.addHover 이 이벤트  마우스 가 올 라 갈 때 이 사건 을 뽑 아서 보 냅 니 다!4 사용자 정의 자동 재생 이벤트 this.autoplay=function(){}이 안에 trigger 라 는 트리거 방법 을 사 용 했 습 니 다this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;   $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");5 마지막 으로 하나의 함수 로 위의 함 수 를 렌 더 링 하여 위의 함 수 를 호출 합 니 다

this.factory = function(){
   this.slider();
   this.addhover();
   t = setInterval(this.autoplay,_this.time);
  }
  this.factory();
javascript TreeView 새로 고침 없 이 펼 쳐 지 는 인 스 턴 스 코드 구현
JS 그림 은 마우스 스크롤 지연 에 따라 불 러 오 는 인 스 턴 스 코드 입 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage