jq는 이미지 스크롤 효과에 대한 멋진 마우스를 구현합니다.

10줄 남짓의 코드로 멋진 이미지 스크롤 코드가 구현됩니다. 아이디어가 맞다면 모든 것이 쉽습니다. 코드를 직접 살펴보겠습니다. 효과!

html 구조:

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

• 1


• 2


• 3


• ;4


• 5


• 6


• 7

< li>< ;img src="images/13.jpg" alt="" />8

css 코드:

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

*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; ;}
. 목록 li{ float:left; height:80px; list-style:none; margin:5px; img{ float:왼쪽; 너비:80px; 테두리:없음;}
.list li a{ 위치:절대:0; 너비:150px; 999; 여백: 40px; 텍스트 정렬: 센터; 오버플로: 숨김; 텍스트-장식: 없음;}

code (jq 라이브러리 소개 참고):

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

$(function () {
$('.list li').hover(function () {
$(this).children('a,img').stop();
$( this).children('img') .stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
$(this).siblings('a') .stop().animate({ ' height': 80, 'marginTop': 0 }, 200)
}), function () {
$(this). children('a,img').stop();
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$( this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200)

}) ;
});

})


단순한 JQ 코드인가요? 친애하는, 당신은 그것을 복사하여 효과를 볼 수도 있습니다!