您的位置：首页 > Web前端

[原创] JQ仿淘宝图片局部放大镜效果

2016-09-03 10:31 423 查看

有的时候我们需要在页面中展示一些高清大图，但是如果直接放在页面中又会显得很占地方，影响用户体验

或者在一些商城网站中，我们需要展示商品的高清大图，所以就需要一个类似放大镜的效果

具体效果请点击这里：图片放大镜效果

原理很简单，首先加载一个略缩图，提高页面加载速度，然后在鼠标划过略缩图的时候创建一个div来控制背景的background-position的范围展示局部大图，具体代码如下:

<!--
* 作者：罗旧的博客
* 网址：http://www.haoshuzx.com
* 时间：2016-08-29
* e-mail：ydx425@gmail.com
-->

<!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("sp
a92e
an");
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html js jq 前端用户体验

相关文章推荐

新的分享

章节导航