jQuery를 사용하여 Apple 공식 웹사이트 포커스 맵 특수 효과 모방_jquery

이번에 공유해 드리고 싶은 jQuery 포커스 이미지는 매우 특별합니다. 아주 단순한 모습이지만 꽤 분위기 있는 이미지입니다. 초점 이미지의 전반적인 스타일은 Apple에서 모방한 것입니다. jQuery를 사용하기 때문에 이미지 전환의 초점 이미지 효과를 얻으려면 이미지 아래의 축소판만 클릭하면 됩니다. 이 jQuery 초점 이미지 플러그인은 매우 적합합니다. 비디오를 표시하는 웹페이지에 사용됩니다.

다음으로 이번 Apple 포커스 이미지를 구현하는 과정과 소스코드를 공유해보겠습니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"> width="920" style="max-width:90%" alt="jQuery를 사용하여 Apple 공식 웹사이트 포커스 맵 특수 효과 모방_jquery" src="img/sample_slides/info.jpg">

• 
• 
• 
• 

위 HTML 코드에서 볼 수 있듯이 전체 포커스 이미지는 일부 div로 구성되어 이미지 컨테이너를 구성하고, 아래 썸네일은 ulli 목록을 사용하여 구성됩니다.

CSS 코드:

코드 복사 코드는 다음과 같습니다.

#갤러리{
    /* CSS3 상자 그림자 */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    상자 그림자:0 0 3px #AAAAAA;
    /* CSS3 둥근 모서리 */
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    테두리-하단-왼쪽-반경:4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    테두리-하단-오른쪽-반경:4px;
    테두리:1px 단색 흰색;
    배경:url(img/panel.jpg) 반복-x 하단 중앙 #ffffff;
    /* 갤러리 너비 */
    너비:920px;
    오버플로:숨김;
}
#슬라이드{
    /* 슬라이드 영역입니다 */
    높이:400px;
    /* jQuery는 나중에 너비를 모든 슬라이드 너비의 합으로 변경합니다. */
    너비:920px;
    오버플로:숨김;
}
.슬라이드{
    부동:왼쪽;
}
#메뉴{
    /* 썸네일을 위한 컨테이너입니다 */
    높이:45px;
}
ul{
    여백:0px;
    패딩:0px;
}
리{
    /* 모든 썸네일은 li 요소입니다 */
    너비:60px;
    디스플레이:인라인 블록;
    목록 스타일:없음;
    높이:45px;
    오버플로:숨김;
}
li.inact:hover{
    /* 마우스 오버 시 강조되는 비활성 상태 */
    배경:url(img/pic_bg.png) 반복;
}
li.act,li.act:hover{
    /* 엄지손가락의 활성 상태 */
    배경:url(img/active_bg.png) 반복 없음;
}
li.act a{
    커서:기본값;
}
.fbar{
    /* 첫 번째 썸네일 옆 가장 왼쪽 수직 막대 */
    너비:2px;
    배경:url(img/divider.png) 반복 없음 오른쪽;
}
리아{
    디스플레이:블록;
    배경:url(img/divider.png) 반복 없음 오른쪽;
    높이:35px;
    패딩 상단:10px;
}
이미지{
    테두리:없음;
}

CSS代码也비常简单，city是一些简单设置而已。

jQuery代码：

复主代码 代码如下:

$(문서).ready(함수(){
    /* 이 코드는 DOM이 완전히 로드된 후에 실행됩니다. */
    var totWidth=0;
    var 위치 = 새 배열();
    $('#슬라이드 .슬라이드').each(함수(i){
        /* 모든 슬라이드를 탐색하고 누적 너비를 totWidth에 저장합니다. */
        위치[i]= totWidth;
        totWidth = $(this).width();
        /* 위치 배열에는 컨테이너 왼쪽 부분에서 각 슬라이드의 상호 오프셋이 포함됩니다. */
        if(!$(this).width())
        {
            Alert("모든 이미지의 너비와 높이를 입력하세요!");
            false를 반환합니다.
        }
    });
    $('#slides').width(totWidth);
    /* cotnainer div의 너비를 결합된 모든 슬라이드의 정확한 너비로 변경합니다. */
    $('#menu ul li a').click(function(e,keepScroll){
            /* 썸네일 클릭 */
            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            var pos = $(this).parent().prevAll('.menuItem').length;
            $('#slides').stop().animate({marginLeft:-positions[pos] 'px'},450);
            /* 슬라이딩 애니메이션 시작 */
            e.preventDefault();
            /* 링크의 기본 동작 방지 */
            // 아이콘을 클릭한 경우 자동 진행 중지:
            if(!keepScroll)clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* 페이지 로드 시 첫 번째 썸네일을 활성으로 표시 */
    /*****
     *
     *    자동 진행을 활성화합니다.
     *
     ****/
    var 현재=1;
    함수 autoAdvance()
    {
        if(current==-1) return false;
        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true]는 28행에서 click 함수의 keepScroll 매개변수로 전달됩니다
        현재 ;
    }
    // 슬라이더가 자동으로 이동하는 시간(초):
    varchangeEvery = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* 사용자 정의 끝 */
});

이것은 매우 큰 규모의 사진입니다.