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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- 在vue.js引用图片的问题
<div id="img"> <img src="img.png" class="img"> </div> ...
- xgboost保险赔偿预测
XGBoost解决xgboost保险赔偿预测 import xgboost as xgb import pandas as pd import numpy as np import pickle im ...
- unityshader(属性)
_Color("Color",Color)=(1,1,1,1)//RGBA _Vector("vector",Vector)=(1,2,3,4) //,fixe ...
- Gym 101510C
题意略. 思路: 由于xi的选取是任意的,所以我们不用去理会题目中的xi数列条件.主要是把关注点放在长度为L的线段覆盖至少k个整数这个条件上. 像这种取到最小的合法解的问题,我们应该要想到使用二分法来 ...
- Java集合框架之HashSet浅析
Java集合框架之HashSet浅析 一.HashSet综述: 1.1HashSet简介 位于java.util包下的HashSet是Java集合框架的重要成员,它在jdk1.8中定义如下: publ ...
- Java基础之多态和泛型浅析
Java基础之多态和泛型浅析 一.前言: 楼主看了许多资料后,算是对多态和泛型有了一些浅显的理解,这里做一简单总结 二.什么是多态? 多态(Polymorphism)按字面的意思就是“多种状态”.在面 ...
- Python之函数（一）定义函数以及传参
定义函数以及传参 函数的定义 def 函数名(): 函数体 例子: def func():#def关键字--定义 func函数名--和变量定义规则一样 ()必须要写格式 :声明 语句结束 s=[1,2 ...
- 一块钱哪里去了？--java浮点型背后的故事
有这样一道智力题:三人住旅馆,老板娘说30元她们付钱后进去了,老板娘想起今天是特价25元,就叫伙计拿5元还给三位顾客,可伙计藏了2元,给了她们3元,这样她们每人得1元,就是说每人付了9元,那3*9=2 ...
- Sql Server中变的定义以及赋值的应用
--申明变量declare @ad_begin datetimedeclare @fydl varchar(50)declare @userid varchar(50)declare @jdrbm v ...
- 浅谈TCP协议，总算明白它是干什么的了
一.什么是TCP,他是干什么的? TCP即传输控制协议(Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通讯协议. TCP是为了在不可靠的互联网 ...