js、jquery实现放大镜效果
在一些电商网站的商品详情页面，都会有放大镜效果，实现起来并不是很困难，今天用了两个小时，写了一个放大镜效果的实例，来分享给大家！
实现的效果大概是这个样子的
预览
先来看一下效果吧，点击下面的链接预览动态的效果！
http://sandbox.runjs.cn/show/vbu6ebq2
代码实现过程：
1. html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>商品详情放大镜效果</title>
<script type="text/javascript" src="js/jquery/jquery-3.2.1.js"></script>
</head>
<body>
<div class="container">
<h2>商品详情放大镜效果</h2>
<div class="magnifierContainer">
<div class="imgLeft">
<!-- 中号图片 -->
<div class="imgMedium" id="imgMedium">
<!-- 放大镜 -->
<div class="magnifier" id="magnifier">
<img src="http://product.dangdang.com/images/zoom_pup.png">
</div>
<!-- 图片 -->
<div class="mediumContainer" id="mediumContainer">
<img src="http://img3m3.ddimg.cn/2/21/22628333-1_w_2.jpg">
</div>
<div id="zhezhao"></div>
</div> <!-- 缩略图 -->
<ul class="img_x" id="img_x">
<li><img src="http://img3m3.ddimg.cn/2/21/22628333-1_x_2.jpg"></li>
<li><img src="http://img3m3.ddimg.cn/2/21/22628333-2_x_2.jpg"></li>
<li><img src="http://img3m3.ddimg.cn/2/21/22628333-3_x_2.jpg"></li>
<li><img src="http://img3m3.ddimg.cn/2/21/22628333-4_x_2.jpg"></li>
<li><img src="http://img3m3.ddimg.cn/2/21/22628333-5_x_2.jpg"></li>
</ul>
</div>
<div class="imgRight">
<!-- 大图 -->
<div class="img_u" id="img_u">
<img src="http://img3m3.ddimg.cn/2/21/22628333-1_u_2.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
2. css部分
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 850px;
margin: 50px auto;
text-align: center;
}
.magnifierContainer {
display: flex;
margin-top: 30px;
}
.imgMedium {
position: relative;
}
.imgLeft .magnifier {
position: absolute;
display: none;
width: 200px;
height: 200px;
}
.mediumContainer {
width: 350px;
height: 350px;
border: 1px solid #eee;
overflow: hidden;
}
#zhezhao {
width: 350px;
height: 350px;
background: transparent;
position: absolute;
top: 0;
border: 1px solid transparent;
}
#zhezhao:hover {
cursor: move;
}
.img_x {
width: 350px;
height: 77px;
border: 1px solid #eee;
margin-top: 20px;
display: flex;
}
.img_x li{
width: 54px;
height: 54px;
border: 2px solid transparent;
margin: 8px 4px;
padding: 2px;
}
.img_u {
width: 500px;
height: 450px;
border: 1px solid #eee;
float: left;
margin-left: 15px;
overflow: hidden;
display: none;
}
</style>
3. js部分
<script type="text/javascript">
$('#img_x li').eq(0).css('border', '2px solid coral');
$('#zhezhao').mousemove(function(e){
$('#img_u').show();
$('#magnifier').show();
var left = e.offsetX - parseInt($('#magnifier').width()) / 2;
var top = e.offsetY - parseInt($('#magnifier').height()) / 2;
left = left < 0 ? 0 : left;
left = left > (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) ? (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) : left;
top = top < 0 ? 0 : top;
top = top > (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) ? (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) : top; $('#magnifier').css('left', left + 'px');
$('#magnifier').css('top', top + 'px'); var leftRate = left / parseInt($('#zhezhao').outerWidth());
var bigLeft = leftRate * parseInt($('#img_u img').outerWidth());
$('#img_u img').css('margin-left', -bigLeft + 'px'); var topRate = top / parseInt($('#zhezhao').outerHeight());
var bigTop = topRate * parseInt($('#img_u img').outerHeight());
$('#img_u img').css('margin-top', -bigTop + 'px');
})
$('#zhezhao').mouseleave(function(){
$('#img_u').hide();
$('#magnifier').hide();
}) $('#img_x li').mouseover(function(){
$(this).css('border', '2px solid coral').siblings().css('border', '2px solid transparent');
$('#mediumContainer img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_w_2.jpg');
$('#img_u img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_u_2.jpg');
})
</script>
实现过程中需要注意的地方：
在实现放大镜在图片上移动时，我给商品图片绑定了mousemove鼠标移动事件，当鼠标移动的同时，也移动放大镜，但是效果却不是想象的样子，会有一些卡顿、闪烁的现象
当鼠标在商品图片上移动时，放大镜也随之移动，当鼠标在放大镜图片上时，则不会移动，这是因为绑定mousemove事件的是商品图片，而不是放大镜图片，而放大镜图片所在的图层在商品图片之上，所以当鼠标移动到放大镜图片上时，就不会触发mousemove事件，从而就出现了卡顿的现象。
那么，怎样解决呢？
我又加了一个div，这个div的大小和商品图片的div的大小一样，背景色为透明色，图层在最上面，然后给这个透明的div绑定mousemove事件，放大镜图片就会流畅的移动了。
在线调试
如需在线调试请点击下面的链接！
如果对您有帮助，记得点赞哦！需要您的支持与鼓励，同时也欢迎您留下宝贵意见！
js、jquery实现放大镜效果的更多相关文章
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- 使用jquery实现放大镜效果
原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- 前端JS电商放大镜效果
前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- js 实现商品放大镜效果
知识点,需熟悉下面属性及含义: offsetLeft //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop //获取元素相对顶部的距离 ...
- Jquery版放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js代码实现放大镜效果
每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...
随机推荐
- 关于商米D1S，USB默认权限在关机后丢失的FAQ
1.机器型号:商米D1S 2.机器系统版本:7.1.2 3.情况描述:双屏的机器不管是银盒子收银还是银盒子智能收银,勾选默认后重启机器还是会提示, 4.解决方案:商米厂商大约会在1月份进行系统更新,到 ...
- shell编程-输入/输出重定向（十一）
linux中文件描述符 linux跟踪打开文件,而分配的一个数字,通过这个数字可以实现对文件的读写操作 用户可以自定义文件描述符范围是:3-max,max跟用户的ulimit –n 定义数字有关系,不 ...
- Spring MVC 实现文件的上传和下载 (八)
完整的项目案例: springmvc.zip 目录 SpringMVC 中,文件的上传,是通过 MultipartResolver 实现的. 所以,如果要实现文件的上传,只要在 spring-mvc. ...
- Android项目的targetSDK>=23，在低于Android6.0的部分测试机（类似华为）上运行时出现的系统权限问题
相信大家对Android6.0以上的动态权限已经有所了解,很多童鞋也已经跃跃欲试地将自己项目的targetSDK升级到了23及其以上,很不幸的是我也成为了其中一员,然而我还是图样图森破了,升级之后的问 ...
- kafka_2.11-2.0.0_常用操作
参考博文:Kafka消费组(consumer group) 参考博文:kafka 1.0 中文文档(九):操作 参考博文:kafka集群管理工具kafka-manager部署安装 以下操作可以在min ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- Mybatis 报错 There is no getter for property named '***' in 'class java.lang.String'
在mapper.xml中 , 如果单参数是String类型 , 且在sql语句中对参数进行了判断 , 如下 when 中的判断 , 如果出现 if 判断也是一样的.都需要把判断中的参数用 _param ...
- C语言 实现逆置功能
C语言 实现逆置功能 //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. 字符串的逆置 方法1:利用数组 #include<stdio.h> ...
- S/4 HANA中的MATDOC和MATDOC_EXTRACT
最近做了销售和物料管理方面的一些需求,因此对S/4中的MM的数据模型有了一定的了解.目前网络已经有一些介绍物料凭证表MATDOC的文章,内容好像不是很详细,另外也没发现介绍库存变更数据表MATDOC_ ...
- 爬楼梯的golang实现
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 输入: 输出: 解释: 有两种方法可以爬到楼顶. ...