有的時候我們需要在頁面中展示一些高清大圖，但是如果直接放在頁面中又會顯得很佔地方，影響用戶體驗
或者在一些商城網站中，我們需要展示商品的高清大圖，所以就需要一個類似放大鏡的效果
具體效果請點擊這裏：圖片放大鏡效果
原理很簡單，首先加載一個略縮圖，提高頁面加載速度，然後在鼠標劃過略縮圖的時候創建一個div來控制背景的background-position的範圍展示局部大圖，具體代碼如下:
<!--
* 作者：羅舊的博客
* 網址：http://www.haoshuzx.com
* 時間：2016-08-29
* e-mail：[email protected]
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片放大插件</title>
<script src="jquery-2.1.4.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
}
.wrap {
overflow: hidden;
margin: 50px 0 0 50px;
position: relative;
}
.wrap img {
border: 1px solid #ccc;
}
.wrap span {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.3);
display: none;
}
.zoom {
width: 500px;
height: 500px;
border: 1px dashed #ccc;
background: url("001.jpg") no-repeat;
background-position: center center;
margin-top: 50px;
display: none;
}
</style>
</head>
<body>
<div class="wrap left">
<img src="001_thumb.jpg" alt="略縮圖"/>
<span></span>
</div>
<div class="zoom left"></div>
<script>
(function ($) {
$.fn.zoom = function () {
var img = $(this).find("img");
var span = $(this).find("span");
var zoom = $(".zoom");
//獲取略縮圖相對於窗口的位置
var tLeft = $(img).offset().left;
var tTop = $(img).offset().top;
$(this).mousemove(function (e) {
//獲取鼠標座標
var mLeft = e.clientX;
var mTop = e.clientY;
//計算鼠標相對於圖片區域的位置
var l = mLeft - tLeft;
var t = mTop - tTop;
//鼠標移動時移動span
$(span).css({
"display": "block",
"left": (l - 25) + "px",
"top": (t - 25) + "px"
});
//計算偏移量
var ll = (l / $(img).width()) * 100 + "%";
var tt = (t / $(img).height()) * 100 + "%";
//設置大圖偏移
$(zoom).css({
"display": "block",
"background-position": ll + " " + tt
})
});
//解除綁定
$(this).mouseout(function () {
$(span).css("display", "none");
$(zoom).css("display", "none");
})
}
})(jQuery);
$(".wrap").zoom();
</script>
</body>
</html>以上只是簡單的實現了效果，在具體項目中，還需要根據實際情況設定大圖的加載時間，是頁面加載完成之後加載還是用戶鼠標劃過的時候才加載，可以根據實際需求判斷，還需要考慮的就是zoom區域的位置，需要採用絕對定位來避免打亂現有的文檔流樣式.
點擊這裏下載源碼：圖片放大鏡效果源碼
本文爲作者原創文章，轉載請註明來自 羅舊的博客,鏈接：http://www.haoshuzx.com/qianduan/43.html