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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- pip安装ansible的过程
我的python环境已经搭好了pip,可以用pip直接安装. 1.首先要安装基础环境: 1)yum install gcc glibc-devel zlib-devel rpm-build opens ...
- python学习——python之禅
(一)python之禅: 在python中运行import this你会看到这样一段文字: The Zen of Python, by Tim Peters Beautiful is better ...
- 人员考勤，MySQLl数据库一个表自动生成3表筛选人员迟到早退缺勤
前言:漂亮的人事小姐姐找我帮忙弄考勤:由于人员考勤和门禁一起,打卡记录太多,打卡机只能导出一个打卡Excel总表,不容易人工筛选. Excel表的格式是这样的:(这里101代替真实人名) 实现目标: ...
- Socket I/O模型之select模型
socket网络编程中有多种常见的I/O模型: 1.blocking阻塞 2.nonblocking非阻塞 3.I/O multiplexing复用 4.signal driven 5.asynchr ...
- 第二篇 特征点匹配以及openvslam中的相关实现详解
配置文件 在进入正题之前先做一些铺垫,在openvslam中,配置文件是必须要正确的以.yaml格式提供,通常需要指明使用的相机模型,ORB特征检测参数,跟踪参数等. #==============# ...
- C#开发BIMFACE系列16 服务端API之获取模型数据1：查询满足条件的构件ID列表
系列目录 [已更新最新开发文章,点击查看详细] 源文件/模型转换完成之后,可以获取模型的具体数据.本篇介绍根据文件ID查询满足条件的构件ID列表. 请求地址:GET https://api.b ...
- Java 从入门到进阶之路（五）
之前的文章我们介绍了 Java 的循环结构,本章我们来看一下 Java 的数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. 数组 - 相同数据类型的元 ...
- 2017福建省赛 L Tic-Tac-Toe 模拟
Kim likes to play Tic-Tac-Toe. Given a current state, and now Kim is going to take his next move. Pl ...
- Atcoder C - Closed Rooms（思维+bfs）
题目链接:http://agc014.contest.atcoder.jp/tasks/agc014_c 题意:略. 题解:第一遍bfs找到所有可以走的点并标记步数,看一下最少几步到达所有没锁的点,然 ...
- 第10讲-Java集合框架
第10讲 Java集合框架 1.知识点 1.1.课程回顾 1.2.本章重点 1.2.1 List 1.2.2 Set 1.2.3 Map 2.具体内容 2.1.Java集合框架 2.1.1 为什么需要 ...