동위원소 확장/축소 기능

StackOverflow https://stackoverflow.com//questions/22042409

  •  21-12-2019
  •  | 
  •  

문제

저는 동위원소를 연구하고 있습니다. 창이 확장되고 열리면서 맥도날드의 예에 최대한 가까워지길 원합니다.

http://www.mcdonalds.de/produkte/alle-produkte

http://jsfiddle.net/9zX6z/1/

높이/너비를 설정하는 클래스가 있습니다.

$(".element-item").on("click", function() {
                that.highlightBlock($(this));

                $("#filter").click();
            });
도움이 되었습니까?

해결책

당신은 이미 기본 사항을 익혔습니다. CSS 클래스를 통해 "확장"/"개방" 동위원소 요소의 너비와 높이를 설정하는 것입니다. open

<li class="product open">

그런 다음 동위원소를 발동시킵니다. 재배치-방법.

제품 이미지 확대/축소는 해당 클래스의 존재 여부에 따라 CSS 전환을 통해 구현됩니다.

.product-image {
    width: 148px;
    height: 148px;
    transition: all 0.4s ease-in-out;
}

.product.open .product-image {
    width: 308px;
    height: 308px;
}

하지만 썸네일 이미지 크기를 확대하는 것만으로는 보기에 좋지 않습니다. 전에 첨가 open 동위원소 요소로 축소 이미지 이미지를 대체합니다. src-제품 이미지의 더 큰 버전에 대한 URL이 포함된 속성입니다.후자는 data-src-large-이미지 속성:

<img class="product-image" data-src-large="product_preview.png" src="product_thumbnail.png" data-src-standard="product_thumbnail.png">

McDonalds 제품 페이지의 구현에는 CSS 클래스도 추가됩니다. item-open 동위원소 항목이 포함된 상위 컨테이너로:

<ul id="isotope" class="isotope item-open">
    <li class="product open"> ...
    <li class="product"> ...
    ...

이 클래스를 기반으로 하는 모든 동위원소 항목의 불투명도는 ~ 아니다 가지고 있다 open 할당된 클래스는 CSS를 통해 다시 축소됩니다.

.item-open .product {
    opacity: 0.15;
}

.item-open .product.open {
    opacity: 1;
}

여기에서 위의 코드 조각에 맞는 CodePens를 볼 수 있습니다. http://codepen.io/fk/pen/dGAzl/ (Isotope v1 사용) 및 http://codepen.io/fk/pen/ohLvF/ (Isotope v2 사용) - 둘 다 가장자리가 약간 거칠지만 최신 Chrome에서 작동합니다.

로딩 표시기를 표시하기 위해 spin.js를 사용했고 CSS 클래스 이름을 약간 변경했으며 원래 McDonalds 제품 페이지와 달리 여러 마크업, 공급업체 접두사 및 IE 특정 필터를 생략하여 작업을 좀 더 쉽게 만들었습니다. 이해하세요(희망합니다 ;)) - 다른 모든 것은 거의 1:1 복사본입니다.

또한 제공되는 ImagesLoaded-plugin에 유의하세요. Isotope v1과 함께 번들로 제공 그것의 문제 그리고 아마도 현재의 방법을 사용하는 것이 더 나을 것입니다. 플러그인의 독립형 버전 고해상도 제품 이미지가 로드되는 시점을 결정하는 데 사용하려는 경우.

jsFiddle JavaScript에는 도움이 되는 몇 가지 설명이 포함되어 있습니다.
여기에 대한 답변과 결합되어 현재 위치에서 앞으로 나아가는 방법에 대한 몇 가지 지침을 제공할 수 있기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top