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

有的时候我们需要在页面中展示一些高清大图，但是如果直接放在页面中又会显得很占地方，影响用户体验
或者在一些商城网站中，我们需要展示商品的高清大图，所以就需要一个类似放大镜的效果

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

原理很简单，首先加载一个略缩图，提高页面加载速度，然后在鼠标划过略缩图的时候创建一个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("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

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

仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改
思路来源:昨天看淘宝的图片空间,发现了一个效果. 点击宝贝的名字,出现一个可编辑的文本框,然后ajax提交(如果数据变的话),改变数据看图说明: 编辑完了提交进行修改数据自己做的代码效果如下: 具 ...
js仿淘宝主图放大镜功能
js仿淘宝主图放大镜功能演示地址下载地址
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
用cloud-zoom做一个仿淘宝的宝贝放大镜查看功能
插件我就不多介绍了,在我整理的<常用JQuery插件整理>里介绍,也有示例.但在实际运用中,我发现一个插件无法达到的效果,语言比较难描述,看图说话吧发现什么问题没有,我做了个demo,虽 ...
仿淘宝图片放大预览效果
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
vue实现淘宝京东商品放大镜效果
实现原理: 两个盒子,通过映射来同步进行移动,达到移动放大镜的效果. 注意点: 遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积一定要是等比例的才行,严格控制样式效果图: 贴上代 ...
仿淘宝，天猫评分效果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
Android仿淘宝加入购物车布局效果
实现效果: 思路:点击购物车弹出一个PopupWindow,主要弄清楚的是PopupWindow的高度以及透明度,图片的位置,图片下层布局的高度(它的高度比popup的低一些).PopupWindow ...

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

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

最新文章

热门文章