10 개가 넘는 코드에서는 멋진 사진 롤링 코드가 실현되면이 효과가 적용되는 한 모든 것이 쉽지 않습니다 효과를 참조하십시오!
HTML 구조 :
코드 사본은 다음과 같습니다.
<ul>
<li> <img src = "images/10.jpg"/> <a href = "#"> <span> 1 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "#"> <span> 2 </span> </a> </li>
<li> <img src = "images/12.jpg"/> <a href = "#"> <span 3 </span> </a> </li>
<li> <img src = "images/13.jpg"/> <a href = "#"> <span> 4 </span> </a> </li>
<li> <img src = "images/10.jpg"/> <a href = "#"> <span> 5 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "#"> <span> 6 </span> </a> </li>
<li> <img src = "images/12.jpg"/> <a href = "#"> <span> 7 </span> </a> </li>
<li> <img src = "images/13.jpg"/> <a href = "#"> <span> 8 </span> </a> </li>
</ul>
CSS 코드 :
코드 사본은 다음과 같습니다.
*{마진 : 0;}
.리스트 {너비 : 640px;
.
.리스트 LI IMG {float : 높이 : 80px;
.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:c enter; line-height : 80px; 오버플로 : 컬러;
JQ 코드 (JQ 라이브러리를 소개해야 함) :
코드 사본은 다음과 같습니다.
$ (function () {
$ ( '. list li'). hover (function () {
$ (this) .children ( 'a, img'). stop ();
$ (이)
$ (this) .SIPLINGS ( 'a'). stop (). 애니메이션 ({ 'height': 80, 'margintop': 0}, 200);
});
}, 기능 () {
$ (this) .children ( 'a, img'). stop ();
$ (이)
$ (this) .SIPLINGS ( 'IMG'). stop (). 애니메이션 ({ 'margintop': 0, 'height': 80}, 200);
});
});
});
JQ 코드의 몇 가지 간단한 문장이 아닙니까? 친애하는, 당신은 그것을 복사하고 효과를 볼 수 있습니다!