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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- SparkSql学习笔记（包含IDEA编写的本地代码）
Spark SQL and DataFrame 1.为什么要用Spark Sql 原来我们使用Hive,是将Hive Sql 转换成Map Reduce 然后提交到集群上去执行,大大简化了编写MapR ...
- vue结合element-ui做简单版todolist
结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; ...
- 《阿里巴巴Java开发手册1.4.0》阅读总结与心得（三）
(六)工程结构 (一)应用分层 1. [推荐]图中默认上层依赖于下层,箭头关系表示可直接依赖,如:开放接口层可以依赖于Web 层,也可以直接依赖于 Service 层,依此类推: 开放接口层: ...
- npm基本命令
1.npm是什么? npm(Node Package Manager)意思是 node 的包管理器,它是随着 NodeJs 安装时一起被安装的: 无论是在前端还是在前端开发中都会使用到 npm 包管理 ...
- windows10环境下安装深度学习环境anaconda+pytorch+CUDA+cuDDN
步骤零:安装anaconda.opencv.pytorch(这些不详细说明).复制运行代码,如果没有报错,说明已经可以了.不过大概率不行,我的会报错提示AssertionError: Torch no ...
- Request请求的应用
1.通过request获得请求行 获得客户端的请求方式:String getMethod() 获得请求的资源: String getRequestURI() StringBuffer getReq ...
- axios跨域访问eggjs的坑egg-cors egg-passport passport-local session传递问题
在同一机器上写前端和后端,前端使用webpack-dev-server启动,后端直接在eggjs项目目录下使用npm run dev启动,这种情况下,前端访问后端就是跨域访问.eggjs提供了一个跨域 ...
- VM安装后没有桥链接协议解决方法
从昨天到今天各种折腾的.网络就是各种不通,能使用的手段都上了,还是不行.奇怪的连DNS都ping不通. ping DNS时一致报: Destination Host Unreachable ... ...
- css 实现居中的五种方式
一 .文字居中 1 固定容器高度的单行文本垂直居中:height=line-height 2 未知容器高度的文本垂直居中:设定padding,使上下的padding值相同即可 ...
- jumper-server-第一次粗略配置
https://www.cnblogs.com/zsl-find/articles/11179450.html