이 문서의 예에서는 작은 이미지 위로 마우스를 이동할 때 jquery가 큰 이미지를 표시하는 방법을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 머리> <br /> li{list-style:none;float:left;margin-left:10px;}<br /> </스타일><br /> <script type="text/javascript" src="jquery-1.8.2.min.js"><br /> <script type="text/javascript"><br /> var 데이터 = {<br /> "images/11_s.jpg":["images/11_b.jpg","美人1"],<br /> "images/22_s.jpg":["images/22_b.jpg","美人2"],<br /> "images/33_s.jpg":["images/33_b.jpg","美人3"],<br /> "images/44_s.jpg":["images/44_b.jpg","美人4"]<br /> };<br /> $(함수(){<br /> $.each(데이터,함수(키,값){<br /> //숨겨질 마지막 div를 초기화합니다 <br /> $("div").last().hide();<br /> //작은 그래프 노드 생성<br /> var smallPath = $("<img src='" key "' / alt="마우스가 작은 image_jquery 위로 슬라이드할 때 큰 이미지를 표시하는 jquery 메서드" >").css({"margin":"5px","padding":"2px","border":"1px solid #000 "});<br /> //큰 이미지 주소와 이름 설정<br /> bigImgPath = smallPath.attr("bigMapPath",value[0]);<br /> bigImgName = smallPath.attr("bigMapName",value[1]); <p> $("div").first().append(smallPath); <p> //썸네일에 이벤트 추가<br /> smallPath.mouseover(함수(){<br /> //마지막 div 페이드인 효과<br /> $("div").last().fadeIn("빠른");<br /> //전체적인 주소 얻기<br /> $("#show").attr("src",$(this).attr("bigMapPath"));<br /> //큰 이미지의 이름을 얻고 스타일을 설정합니다 <br /> $("#imgTitle").text($(this).attr("bigMapName")).css({"배경":"#ebf1de","padding":"10px","margin-bottom":" 10px"});<br /> });<br /> smallPath.mouseout(함수(){<br /> $("div").last().fadeOut("빠른");<br /> });<br /> });<br /> });<br /> <br /> <본문><br /> <div> 본문> 이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.