JQ实现一个放大镜效果

当我们浏览购物网站某个商品的详情页的时候，都会有一个鼠标移入到商品上时放大的效果，那么今天我们就用jq来实现一个放大镜的效果，先上一个效果图让大家看一下（下图是我仿照一加官网写的一个商品详情页）：

首先我们写放大镜要明白是怎样的一个思路去实现这个效果；先分析，既然是放大镜，那么可以肯定的是要按照一个合适的比例去放大对应的相对的图片，同时放大镜部分和被放大图片的移动距离都要等比例的放大，基本原理就这些了，然后下面我们再把细节完善一下。
首先我们需要创建几个变量用于设定图片的位置、移动距离等，在这我们就设定为全局变量了，因为后续用到的比较多；

 $(function () {var mouseX = 0; //鼠标移动的位置Xvar mouseY = 0; //鼠标移动的位置Yvar maxLeft = 0; //最右边var maxTop = 0; //最下边var markLeft = 0; //放大镜移动的左部距离var markTop = 0; //放大镜移动的顶部距离var perX = 0; //移动的X百分比var perY = 0; //移动的Y百分比var bigLeft = 0; //大图要移动left的距离var bigTop = 0; //大图要移动top的距离

创建完成后我们要添加鼠标移入移出事件（此时要注意移出要是用mouseleave，阻止冒泡，这是一个小细节），然后改变放大镜的位置，同时要让选定区域的小框只能在原图上移动；

 function updataMark($mark) {//让小框只能在小图中移动if (markLeft < 0){markLeft = 0;}else if (markLeft > markLeft){markLeft = markLeft;} if (markTop < 0){markTop = 0;} else if (markTop > maxTop){markTop = maxTop;}

还要在改变放大镜位置步骤中设置相应的移动比例；

perX = markLeft / $(".good-img").outerWidth();perY = markTop / $(".good-img").outerHeight();bigLeft = -perX * $(".bigImg").outerWidth();bigTop = -perY * $(".bigImg").outerHeight();//小框的位置和属性$mark.css({"left":markLeft, "top":markTop, "display":"block"});//改变完放大镜位置后改变大图的位置function updataBig() {$(".bigImg").css({"left":bigLeft, "top":bigTop, "display":"block"});}

则是后我们可以添加鼠标移入、移动、移出时的css效果了；
注：鼠标移动的位置（mouseX/Y）=鼠标指针的位置-鼠标指针的偏移量-小框宽高的1/2（此设定是为了能够显示原图的边缘，因为小框是有一定宽高的，而指针只是一个点）

//鼠标移入/移动时function imgMouseMove(event) {$(".bigGlass").css("display","block");$(".bigImg").css("display","block");var _this = $(this);var _mark = $(this).children(".grayImg");//鼠标在小图上的位置mouseX = event.pageX - _this.offset().left - _mark.outerWidth()/2;mouseY = event.pageY - _this.offset().top - _mark.outerHeight()/2;$(".grayImg").css("opacity", "1");$(".good-img").find("img").css("opacity", "0.7");

最后我们可以设定一下小框的最大移动位置

 //最大值maxLeft = _this.width() - _mark.outerWidth();maxTop = _this.height() - _mark.outerHeight();markLeft = mouseX;markTop = mouseY;updataMark(_mark);updataBig();

最后上一下html和css部分大家可以参考一下；

<div class="bigGlass"><img class="bigImg" src="../images/goodsDetails/758a2dae167ec24e14e5e01cf94105f4_400_400.png"></div><div class="good-img"><div class="grayImg"></div><img class="good-sImg" src="../images/goodsDetails/24bfb60d8ca48ed5b69cad133ef872e4.png" ></div>

//注：css部分是用scss写的
.goods-details .bigGlass {position: absolute;width: 400px;height: 400px;border: 1px solid #999;border-radius: 2px;left: 500px;top: 40px;overflow: hidden; }.goods-details .bigGlass .bigImg {width: 700px;height: 700px;position: absolute; }.goods-details .good-img {width: 500px;height: 500px;float: left;margin-top: 40px; }.goods-details .good-img .grayImg {position: absolute;background-position: 0 0;box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);width: 100px;height: 100px;display: none;z-index: 2; }.goods-details .good-img .good-sImg {position: relative;width: 400px;height: 400px;margin: 50px; }

大家看明白了吗，试着自己写一个放大镜吧

JQ实现一个放大镜效果相关推荐

使用OpenGL Shader实现放大镜效果
使用OpenGL Shader实现放大镜效果 2014年3月16日renjihe发表评论阅读评论周末闲来无事,想玩玩OpenGL Shader,想想就实现一个放大镜效果的Shader吧. 着色器可以 ...
[原创] JQ仿淘宝图片局部放大镜效果
有的时候我们需要在页面中展示一些高清大图,但是如果直接放在页面中又会显得很占地方,影响用户体验或者在一些商城网站中,我们需要展示商品的高清大图,所以就需要一个类似放大镜的效果具体效果请点击这里:图 ...
基于vue的一个关于实现放大镜效果的小案例
实现类淘宝放大镜效果前端小白一枚,最近在进行 vue 方面的学习,逛淘宝闲来无事想试试做个放大镜,结果虽然做出来了,但其中有一些问题让我无法解决,四处搜索也没有找到满意的答案,很是心烦,希望能有大佬 ...
JQuery放大镜效果实现实例
实现效果演示: 鼠标移入左侧缩略图时,小盒子和右边大图显示,并且小盒子跟随鼠标移动,右侧大图出现放大效果. 实现步骤: HTML部分: 要实现放大镜效果,只需要一个简单的布局,左右各一个盒子,左侧放缩 ...
图片放大镜效果实现过程详解
给你们推荐一下这是一个大牛直播传授知识你们可以学习一下人家怎么学习的想学习的可以来直播时间: 晚8点听课方式: 感兴趣的同学可以加Q群:439107211 点击链接加入群[前端技术交流群]: ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
canvas整体放大_【HTML5】Canvas 实现放大镜效果
图片放大镜效果原理首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化获得 canvas 和 image 对象,这里使用标签 ...
php 放大镜,图片放大镜效果实战总结
摘要:本次实战主要完成了图片放大镜的效果,通过定义原始图片,放大镜,放大后的图片,然后设置放大后的图片为原始图片的3倍,通过鼠标移上显示放大后的图片,并通过位移计算当前放大镜的位置,设置放大后图片的偏 ...
javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

JQ实现一个放大镜效果

JQ实现一个放大镜效果相关推荐

最新文章

热门文章