js---电商中常见的放大镜效果
js中的放大镜效果
在电商中，放大镜效果是很常见的，如下图所示：
当鼠标悬浮时，遮罩所在区域在右侧进行放大。
在动手写之前，我们要先理清思路，分析需求，所需知识点，再将每一块进行组装，最后进行功能的完善。
首先，需求分析：
- 打开页面是看到只有一张图片
- 鼠标悬浮在图片上上时遮罩和右侧图片显示出来
- 遮罩随着鼠标的移动而移动
- 右侧图片随着遮罩的移动而移动
其实，想此类两个图片在不同位置，一般都是多图片进行配合运动形成的效果。
本案例中左侧使用的是小图片，右侧使用的是大图片。
所需知识点：
- 元素的隐藏和显示 display:none / block
- 右侧大图片只有部分显示，所有需要溢出隐藏 overflow：hidden
- 遮罩和大图片需要移动，所有要用到定位。position : absolute;
下面我们来写代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>放大镜</title>
<style>
/* 预定义样式 */
*{
padding: 0;
margin: 0;
}
/* 处理容器 */
#box{
margin: 100px 200px;
}
#box,#d_small{
width: 400px;
height: 240px;
display: inline-block;
border: 1px sold red;
position: relative;
}
/* 大图片的容器 */
/* 因为遮罩是正方形，所有大图片的显示部分也要是正方形，这样视觉效果才会更好 */
#d_big {
width: 240px;
height: 240px;
position: absolute;
top:0;
left: 400px;
overflow: hidden;
display: none;
border: 1px solid red;
}
/* 左侧小图片*/
#d_small img{
width: 400px;
height: 240px;
vertical-align: top;
}
/* 大图片的尺寸和小图片宽高比例要一直，避免穿帮 */
#d_big img{
width: 800px;
height: 480px;
vertical-align: top;
position: absolute;
top:0;
left:0;
}
/* 遮罩样式 */
#mask{
width: 100px;
height: 100px;
background-color: rgba(225,225,250,.6);
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="d_small">
<img src="img/1.jpg">
<div id="mask"></div>
</div>
<div id="d_big"><img src="img/2.jpg"></div>
</div>
</body>
</html>
下面来写一下js
<script>
// 获取节点
var small = document.getElementById("d_small"); //获取小图片的容器
var smallImage = small.children[0]; //获取小图片
var mask = small.children[1]; //获取遮罩
var big = document.getElementById("d_big"); //获取大图片的容器
var bigImage = big.children[0]; //获取大图片
// 绑定鼠标事件
// 鼠标悬浮在小图片时,让遮罩和大图片显示处理
small.onmouseover = function(){
mask.style.display = "block";
big.style.display = "block";
}
// 鼠标移出时再消失
small.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
// 鼠标移动时,遮罩跟着移动,并且大图片跟着以相同比例移动
// 绑定鼠标移动事件
// Event 是一个事件对象，当一个事件发生后，和当前事件发生相关的详细信息会被临时存储到一个指定的地方，也就是event对象，
// 声明一个变量用来储存遮罩的坐标位置
var x = 0;
var y = 0;
small.onmousemove = function(event){
// 作兼容
var event = event || window.event;
// 遮罩中心点X坐标 = 鼠标X坐标 - 定位的父级元素的左偏移量 - 1/2的遮罩的宽度
var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
// console.log(x,y);
// 用来判断遮罩达到小图片边界是的状况,以免遮罩移出小图片框
if(x < 0){
x = 0
}else if (x > small.offsetWidth - mask.offsetWidth){
x = small.offsetWidth - mask.offsetWidth;
};
if(y < 0){
y = 0
}else if (y > small.offsetHeight - mask.offsetHeight){
y = small.offsetHeight - mask.offsetHeight;
};
// 遮罩的动态定位
mask.style.left = x + "px";
mask.style.top = y + "px";
// 设置右侧大图片的移动(大图片的移动 = 大图片与小图片的比例 * 遮罩的移动)
// a,b为大图片想做和向上的偏移量
var a = -x * bigImage.offsetWidth / smallImage.offsetWidth;
var b = -y * bigImage.offsetHeight / smallImage.offsetHeight;
// 为防止右侧和下侧出现空白区域,进行一个判断
if(a < -(bigImage.offsetWidth - big.offsetWidth)){
bigImage.style.left =- (bigImage.offsetWidth - big.offsetWidth )+ "px";
}else{
bigImage.style.left = -x * bigImage.offsetWidth / smallImage.offsetWidth + 'px';
}
if(b < -(bigImage.offsetHeight - big.offsetHeight)){
bigImage.style.top = -(bigImage.offsetHeight - big.offsetHeight) + "px";
}else{
bigImage.style.top = -y * bigImage.offsetHeight / smallImage.offsetHeight + 'px';
}
}
</script>
js---电商中常见的放大镜效果的更多相关文章
- 前端JS电商放大镜效果
前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战
Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...
- Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析
Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析 生鲜电商搜索引擎的特点 众所周知,标准的搜索引擎主要分成三个大的部分,第一步是爬虫系统,第二步是数据分析,第三步才 ...
- SpringBoot+Neo4j在社交电商中，讲述你是怎么被绑定为下线的
上两篇文章我们主要讲解了Neo4j的基本知识以及Neo4j的基本使用,这篇文章我们就以实例来深入的理解一下,我们以社交电商中的绑定关系为例,使用SpringBoot+Neo4j来实现. Neo4j文章 ...
- Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)
Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...
- REDIS 在电商中的实际应用场景(转）
1. 各种计数,商品维度计数和用户维度计数 说起电商,肯定离不开商品,而附带商品有各种计数(喜欢数,评论数,鉴定数,浏览数,etc),Redis的命令都是原子性的,你可以轻松地利用INCR,DECR等 ...
- Redis在电商中的实际应用-Java
示例代码用Jedis编写. 1. 各种计数,商品维度计数和用户维度计数 说起电商,肯定离不开商品,而附带商品有各种计数(喜欢数,评论数,鉴定数,浏览数,etc),Redis的命令都是原子性的,你可以轻 ...
- 电商中的库存管理实现-mysql与redis
库存是电商系统的核心环节,如何做到不少卖,不超卖是库存关心的核心业务问题.业务量大时带来的问题是如何更快速的处理库存计算. 此处以最简模式来讨论库存设计. 以下内容只做分析,不能直接套用,欢迎 ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- python 25 类的成员
目录 1. 类的私有成员 -- __ 1.1 类的私有静态属性 1.2 类的私有方法 1.3 对象的私有方法 2. 类的其他方法 2.1 类方法 @classmethod 2.2 静态方法 @stat ...
- 礼盒抖动动画（CocosCreator）
推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 这个月还有一天了,别问我为什么是一天,996,懂吗?项目是做不完了,策划又加新功能,又不能安静的改bug了.又是动画 ...
- MSIL实用指南-Action的生成和调用
MSIL实用指南-Action的生成和调用 System.Action用于封装一个没有参数没有返回值的方法.这里生成需要Ldftn指令. 下面讲解怎生成如下的程序. class ActionTest ...
- H5调用相机和相册更换头像
需求:H5调用手机的相机和相册从而实现更换头像的功能 这个功能是很常用的一个功能,因此做一个记录. 1.在头像img下加一个文件输入框 <input type="file" ...
- hdu1521 排列组合 指数型母函数模板题
排列组合 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- codeforces 807 E. Prairie Partition（贪心+思维）
题目链接:http://codeforces.com/contest/807/problem/E 题意:已知每个数都能用x=1 + 2 + 4 + ... + 2k - 1 + r (k ≥ 0, 0 ...
- 基于 KubeSphere CI/CD 将 Spring Boot 项目发布至 Kubernetes
本示例基于开源的 KubeSphere 容器平台 演示如何通过 GitHub 仓库中的 Jenkinsfile 来创建流水线,流水线共包括 8 个阶段,最终将一个 Hello World 页面部署到 ...
- .gitignore文件失效的解决方案
通常在idea中,我们使用git进行项目管理的时候,一些不需要的文件如.idea,.target文件不需要上传至gitlab仓库,这时,就需要在项目中定义一个.gitignore文件,用来标识这些文件 ...
- Vue源码中compiler部分逻辑梳理（内有彩蛋）
目录 一. 简述 二. 编译流程 三. 彩蛋环节 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 ...
- SQL，如果碰到Json，你会怎么做？
1.Json串如下: DECLARE @JsonInfo NVARCHAR() SET @JsonInfo=N' { "CalcPayInput":{ ", " ...