>  기사  >  웹 프론트엔드  >  jQuery 단순 이미지 확대 효과 샘플 code_jquery

jQuery 단순 이미지 확대 효과 샘플 code_jquery

WBOY
WBOY원래의
2016-05-16 16:45:251510검색

DEMO 원형 그림을 클릭하고 그림 방식으로 물 그림을 아래쪽 레이어에 배치합니다. 마우스를 위로 올리면 그림의 높이와 너비가 비례하여 증가하며 그림이 왼쪽 상단으로 이동합니다.

코드

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





제목 없는 문서
스크립트>
$(문서) .ready(function(e) {
$(".water1").mouseover(function(){
$("#img1").stop(true,true ).animate({top:"- 32.5px",left:"-32.5px", width:"400px",height:"400px"},"slow")
$("#img2"). stop(true,true).animate( {top:"-10px",left:"-10px", width:"115px",height:"115px"},"slow")
$("#img3 ").stop(true,true) .animate({top:"-4px",left:"-4px", width:"41px",height:"41px"},"slow");
})
$(".water1" ).mouseout(function(){
$("#img1").stop(true,true).animate({top:"0px",left:"0px", 너비:"335px", 높이:" 335px"},"느림");
$("#img2").stop(true,true).animate({top:"0px",left:"0px" , 너비:"95px", 높이: "95px"},"느림")
$("#img3").stop(true,true).animate({top:"0px",left:"0px ", 너비:"33px", 높이:"33px"},"느림");
})
});


"표시">
< ;div class="water1">







성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:JavaScript는 이모티콘 삽입에 적합한 커서 위치에 텍스트 삽입을 제어합니다_javascript 기술다음 기사:JavaScript는 이모티콘 삽입에 적합한 커서 위치에 텍스트 삽입을 제어합니다_javascript 기술

관련 기사

더보기