本文主要介紹了jQuery實現滑鼠滑過預覽圖片大圖效果的方法,涉及jQuery滑鼠事件響應及頁面元素屬性動態操作相關技巧,需要的朋友可以參考下,希望能幫助到大家。
本文實例講述了jQuery實作滑鼠滑過預覽圖片大圖效果的方法。分享給大家供大家參考,如下:
需求是這樣的: 滑鼠移動的圖片上,同時顯示預覽的大圖,滑鼠移開,則隱藏。
原理其實很簡單,首先需要一個p , 然後動態透過jQuery方法加入標籤,改變這個的樣式(寬,高),以及需要顯示的圖片路徑。
js程式碼:
$(function(){ var ei = $("#large"); ei.hide(); $("#img1, img").mousemove(function(e){ ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" 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"> <p id="large"></p> 鼠标滑过预览图片:<br> <img width="120" height="60" src="logo-jq.gif"><br>
相關推薦:
以上是jQuery實作滑鼠滑過預覽大圖效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!