本文實例講述了jquery實現滑鼠滑過小圖時顯示大圖的方法。分享給大家供大家參考。具體實作方法如下： 複製程式碼 程式碼如下: <br /> li{list-style:none;float:left;margin-left:10px;}<br /> <br /> var data = {<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 /> $(function(){<br /> $.each(data,function(key,value){<br /> //初始化最後一個div為隱藏<br /> $("div").last().hide();<br /> //建立小圖的節點<br /> var smallPath = $("<img src='" key "' / alt="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(function(){<br /> //最後一個div淡入效果<br /> $("div").last().fadeIn("fast");<br /> //取得大圖位址<br /> $("#show").attr("src",$(this).attr("bigMapPath"));<br /> //取得大圖名稱並設定樣式<br /> $("#imgTitle").text($(this).attr("bigMapName")).css({"background":"#ebf1de","padding":"10px","margin-bottom":" 10px"});<br /> });<br /> smallPath.mouseout(function(){<br /> $("div").last().fadeOut("fast");<br /> });<br /> });<br /> });<br /> 希望本文所述對大家的jQuery程式設計有所幫助。
