本篇內容主要講解“jQuery怎么實現鼠標滑過預覽圖片大圖效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jQuery怎么實現鼠標滑過預覽圖片大圖效果”吧!
需求是這樣的： 鼠標移動的圖片上，同時顯示預覽的大圖，鼠標移開，則隱藏。
原理其實很簡單，首先需要一個div , 然后動態通過jQuery方法添加<img>標簽，改變這個<img>的樣式（寬，高），以及需要顯示的圖片路徑。
js代碼：
$(function(){
var ei = $("#large");
ei.hide();
$("#img1, img").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});HTML 部分：
上傳預覽圖片:<br> <input id="f1" name="f1" type="file" /><br> <img id="img1" width="120" height="60" src="logo-jq.gif"> <div id="large"></div> 鼠標滑過預覽圖片:<br> <img width="120" height="60" src="logo-jq.gif"><br>
到此，相信大家對“jQuery怎么實現鼠標滑過預覽圖片大圖效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
