이 문서의 예에서는 작은 이미지 위로 마우스를 이동할 때 jquery가 큰 이미지를 표시하는 방법을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br> li{list-style:none;float:left;margin-left:10px;}<br> </스타일><br> <script type="text/javascript" src="jquery-1.8.2.min.js"></script><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 "' />").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> <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></div><br> <div><br> <img id="show" src="" /><br> </div><br> </본문><br> </p> </div>
