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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- deepin 15.11 安装 pyenv
GitHub:官方环境:https://github.com/pyenv/pyenv/wiki/Common-build-problems GitHub:官方文档:https://github.com ...
- Liunx软件安装之JDK
在安装 jdk 之前我们需要先了解下 openjdk 跟 oracle jdk 的区别. OpenJDK 是 JDK 的开源码版本,以 GP L 协议的形式发布.在 JDK7 的时候,OpenJDK ...
- HDU 6055
题意略. 思路:要你找出所有正多边形,其实是唬人的,整点的正多边形只有正方形,具体证明可以参考 2017国家队论文集-<正多边形>-杨景钦 详见代码: #include<bi ...
- MySql定时器，亲测可用
1. 查看数据库的event功能是否开启,在MySql中event默认是关闭的,需要查看并且要确保event处于开启状态 sql:show VARIABLES LIKE '%sche%'; 如果eve ...
- Spring框架之事务管理
Spring框架之事务管理 一.事务的作用 将若干的数据库操作作为一个整体控制,一起成功或一起失败. 原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. 一致性:指事务前后 ...
- Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置
之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作.之前的内容中也有提到wire注解,今天就详细的介绍一下对数据进行查询以及DML操作以及Wire S ...
- hbase G1 GC优化
本文借鉴之前HBaseConAsia2017,小米公司对hbase g1 gc的优化分享.此外还可以参考apache官方博客对于hbase g1 gc优化的一篇文章(Tuning G1GC For Y ...
- 【数据库】MySQL 函数大全包含示例（涵盖了常用如时间、数字、字符串处理、数据流函数的和一些冷门的）
ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/mysqlFunctionDesc 数学函数(Mathem ...
- java虚拟机10.内存模型与线程
多任务处理在现代计算机操作系统中是一项必备的功能,让计算机同时去做几件事情,不仅是因为计算机的运算能力强大了,更重要的原因是计算机的运算速度与它的存储和通信子系统速度的差距太大,大量的时间都花费在磁盘 ...
- docker使用nginx反向代理springboot
docker运行nginx容器 快速安装运行 docker-hub文档 https://hub.docker.com/_/nginx 拉取nginx1.6.0 docker pull nginx:1. ...