前言

每當打開淘寶，天貓等pc端時，看到心儀的物品時，點擊圖片時，便呈現出放大的效果。有沒有去理解分析它的原理？是不是感覺非常的神奇？當真正地去接觸，其實非常好理解。下面一起來學習！

Jquery和CSS3輕鬆實現放大鏡效果

html

small是原始圖片，large是放大鏡片

css

.magnify{
 position: relative;
}
.magnify img{
 width: 100%;
}
.large {
 width: 175px; 
 height: 175px;
 position: absolute;
 border-radius: 100%;
 box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
 0 0 7px 7px rgba(0, 0, 0, 0.25), 
 inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
 background: url('0413pf3.jpg') no-repeat;
 display: none;
} 

js

$(document).ready(function(){
 var native_width = 0;
 var native_height = 0;
 // 監聽鼠標在magnify元素移動
 $(".magnify").mousemove(function(e){
 if(!native_width && !native_height){
 // 獲取原始圖片的寬高
 var image_object = new Image();
 image_object.src = $(".small").attr("src");
 native_width = image_object.width;
 native_height = image_object.height;
 }else{
 var magnify_offset = $(this).offset();
 var mx = e.pageX - magnify_offset.left;
 var my = e.pageY - magnify_offset.top;
 if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
 $(".large").fadeIn(100); 

 } else {
 $(".large").fadeOut(100);
 }
 if($(".large").is(":visible")) {
 var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width() / 2) * -1;
 var ry = Math.round(my/$(".small").height()*native_height - $(".large").height() / 2) * -1;
 var bgp = rx + "px " + ry + "px";
 var px = mx - $(".large").width()/2;
 var py = my - $(".large").height()/2;
 $(".large").css({left: px, top: py, backgroundPosition: bgp});
 }
 }
 })
})

是不是覺得很簡單了，代碼量不大，原理了就是鼠標移動時，獲取鼠標在原始圖片的位置，計算出放大鏡片圖片的`background-osition`值，實時去修改，這樣就形成了放大鏡的效果。

公告

更多資源敬請關注！

閱讀更多 web秀 的文章

關鍵字: HTML 地去 端時