0
아주 멋진 슬라이더를 재현하고 싶지만, 순수 HTML 및 CSS로 먼저 시도하고 싶습니다. (원래 하나는 자바 스크립트 만, 몇 년 전과 아주 전문적인 소스에서 나온 것입니다.) 이것은 개념 테스트이기 때문에 크로스 브라우저 같은 것들에 넣는 노력은 없습니다.특수 이미지 슬라이더
또한, 나도 몰라요. 그것을 호출하는 방법 그래서 나는 그것을 google하는 것을 전혀 모른다.
아이디어는 같은 너비의 상자에 그림 5 장을 넣는 것입니다. 이 중 하나를 가리키면 비활성 아이콘이 축소되어 활성 아이콘이 완전히 표시됩니다. 여기에 내가 시도 내용은 다음과 같습니다
#showcase {
\t position: relative;
\t width: 760px; \t /* 750px + 10px to prevent flickering */
\t height: 200px;
}
#showcase:hover > .jewelry {
\t width: 75px;
}
.jewelry {
\t width: 150px;
\t height: 100%;
\t float: left;
\t transition: width 1s;
}
.jewelry:hover {
\t width: 450px !important;
}
.jewelryOtherHovered {
\t width: 75px;
}
#jewelry1 {
\t margin-left: 5px;
\t background-color: red;
}
#jewelry2 {
\t background-color: yellow;
}
#jewelry3 {
\t background-color: green;
}
#jewelry4 {
\t background-color: blue;
}
#jewelry5 {
\t background-color: pink;
}<div id="showcase">
\t <div id="jewelry1" class="jewelry" onMouseOver="(0)" onmouseout=""> \t </div>
\t <div id="jewelry2" class="jewelry"></div>
\t <div id="jewelry3" class="jewelry"></div>
\t <div id="jewelry4" class="jewelry"> \t </div>
<div id="jewelry5" class="jewelry"></div>
</div>말할 필요도없이, 그것이 내가 원하는 방식으로 작동하지 않습니다. 노란색 블록을 가리키면 절반이 녹색 블록으로 이동합니다. 그 결과 전체 폭이 틀립니다. (분홍색이 오른쪽에 붙어 있지 않다면, 나는 당신이 의미하는 바를 얻을 수 있기를 바랍니다.) 그런 다음 빨간색 하나를 매우 빠르게 노란 색으로 가져간 다음 하단의 상자에서 나가십시오. 이 경우 핑크색이 표시됩니다.
질문 중 누군가가 문제를 해결하는 방법을 알고 있습니까? 아니면 누구에게 더 나은 방법이 있습니까? 도움을 주셔서 감사합니다 :-)