商品信息页面放大镜功能

主要是针对商品进行放大功能

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>放大镜</title><link rel="stylesheet" href="css/glass.css">
</head>
<body><div id="glassBox" ><div class="glassLeft"><div class="showBox"><img src="data:images/show_1.jpg" alt=""><div class="cover"></div></div><ul><li class="active"><img src="data:images/small_1.jpg" alt=""></li><li><img src="data:images/small_2.jpg" alt=""></li><li><img src="data:images/small_3.jpg" alt=""></li><li><img src="data:images/small_4.jpg" alt=""></li></ul></div><div class="glassRight"><img src="data:images/big_1.jpg" alt=""></div></div><script src="js/glass.js"></script><script>let glass =new Glass('#glassBox')glass.onMouseover()glass.onMouseout()glass.showSCale()glass.onGlass()glass.onTab()</script>
</body>
</html>

css代码

*{margin: 0;padding: 0;
}
ul,li{list-style: none;
}
#glassBox{width: 1200px;margin: 50px auto;display: flex;
}
.glassLeft .showBox{width: 350px;position: relative;margin-bottom: 20px;cursor: pointer;
}
.glassLeft .showBox>.cover{width: 100px;height: 100px;background-color: rgba(172, 255, 47, 0.5);position: absolute;top: 0;left: 0;display: none;pointer-events: none;
}
.glassLeft ul{display: flex;justify-content: space-between;
}
.glassLeft ul>li{cursor: pointer;
}
.glassLeft ul>li>img{width: 100%;height: 100%;
}
.glassRight{width: 600px;height: 600px;border: 1px solid #11c9bf;overflow: hidden;position: relative;margin-left: 40px;display: none;
}
.glassRight img{position: absolute;
}
.showActive{display: block !important;
}
ul>.active{border: 2px solid red;
}

js代码

/*** !使用class类实现*  *移动比例计算*  ? 覆盖层移动距离       覆盖层大小*  ? --------------  =  -----------*  ? 大图移动距离？        放大镜大小* * 显示比例计算*  ?    覆盖层大小         放大镜大小*  ? --------------  =  ----------------*  ?    显示盒子大小       大图显示区域大小？*/class Glass {constructor(id) {this.glassRoot = document.querySelector(id)this.showBox = this.glassRoot.querySelector('.showBox')this.coverBox = this.glassRoot.querySelector('.cover')this.ulEle = this.glassRoot.querySelector('.glassLight>ul')this.bigImg = this.glassRoot.querySelector('.glassRight>img')this.liEle = this.glassRoot.querySelectorAll('ul>li')this.showImg = this.glassRoot.querySelector('.showBox>img')this.glassBox = this.glassRoot.querySelector('.glassRight')}/*** !显示比列*/showSCale() {// 放大镜的大小let glassBoxWidth = parseInt(window.getComputedStyle(this.glassBox).width)let glassBoxHeight = parseInt(window.getComputedStyle(this.glassBox).height)// 覆盖层的大小let coverBoxWidth = parseInt(window.getComputedStyle(this.coverBox).width)let coverBoxHeight = parseInt(window.getComputedStyle(this.coverBox).height)// 显示盒子的大小let showBoxWidth = parseInt(window.getComputedStyle(this.showBox).width)let showBoxHeight = parseInt(window.getComputedStyle(this.showBox).height)// 计算显示比例let w = glassBoxWidth * showBoxWidth / coverBoxWidthlet h = glassBoxHeight * showBoxHeight / coverBoxHeight//设置大图片的大小this.bigImg.style.width = w + 'px'this.bigImg.style.height = h + 'px'}/*** !鼠标移入移出事件* *1.鼠标移入显示框，覆盖层出现，大图出现* *2.鼠标移出显示框，覆盖层隐藏，大图隐藏*/onMouseover() {let _this = thisthis.showBox.addEventListener('mouseover', function () {_this.coverBox.classList.add('showActive')_this.glassBox.classList.add('showActive')})}onMouseout() {let _this = thisthis.showBox.addEventListener('mouseout', function () {_this.coverBox.classList.remove('showActive')_this.glassBox.classList.remove('showActive')})}/*** 放大镜效果*/onGlass() {let _this = thisthis.showBox.addEventListener('mousemove', function (e) {e = e || window.eventlet x = e.offsetX - _this.coverBox.offsetWidth / 2let y = e.offsetY - _this.coverBox.offsetHeight / 2//边界检查if (x < 0) {x = 0}if (x > _this.showBox.offsetWidth - _this.coverBox.offsetWidth) {x = _this.showBox.offsetWidth - _this.coverBox.offsetWidth}if (y < 0) {y = 0}if (y > _this.showBox.offsetHeight - _this.coverBox.offsetHeight) {y = _this.showBox.offsetHeight - _this.coverBox.offsetHeight}// 覆盖层移动距离_this.coverBox.style.top = y + 'px'_this.coverBox.style.left = x + 'px'/*** !计算移动比例，从而计算出大图需要移动距离*/// 放大镜的大小let glassBoxWidth = parseInt(window.getComputedStyle(_this.glassBox).width)let glassBoxHeight = parseInt(window.getComputedStyle(_this.glassBox).height)// 覆盖层的大小let coverBoxWidth = parseInt(window.getComputedStyle(_this.coverBox).width)let coverBoxHeight = parseInt(window.getComputedStyle(_this.coverBox).height)// 计算大图移动距离let bigImgX = x * glassBoxWidth / coverBoxWidthlet bigImgY = y * glassBoxHeight / coverBoxHeight//移动大图_this.bigImg.style.top = -bigImgY + 'px'_this.bigImg.style.left = -bigImgX + 'px'})}/*** !选项卡*  * 1.鼠标移入发送改变，并同时清除所有选中效果*  * 2.给当前的选中图片设置选中效果*  * 3.切换显示图片和大图*/onTab() {      for (let i = 0; i < this.liEle.length; i++) { let _this = this this.liEle[i].addEventListener('mouseover', function (){_this.onClear()this.classList.add('active')_this.showImg.setAttribute('src',`images/show_${i+1}.jpg`)_this.bigImg.setAttribute('src',`images/big_${i+1}.jpg`)         })}}onClear() {for (let i = 0; i < this.liEle.length; i++) {this.liEle[i].classList.remove('active')}}
}

商品信息页面放大镜功能相关推荐

JAVA商品信息查询的功能
综合一维数组和二维数组的相关知识,以及数组排序的多种算法来实现商品信息查询的功能. 假设在仓库系统中,每件商品都有 3 个库存信息,分别是入库量.出库量和当前库存量.定义一个一维数组来存储 5 件商品 ...
企业WEB项目实现商品详情页面展示功能
概述在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面.其中,商品页面分为三大部分: a) 商品基本信息 b) 延迟加载商品详情.延迟一秒加载使用ajax c) 商品的 ...
[小O地图-网抓]-山姆会员商店商品分类及商品信息
小O地图提供除提供地图功能外,还提供网页爬虫功能.可以抓取指定网页中的记录数据,结果保存在表格中. 步骤: [1]新建任务在[网页爬虫\商超类]下选择[山姆会员商店],输入必要的任务信息后,点击确定 ...
**超市商品信息管理系统**
超市商品信息管理系统商品信息包括:商品名称.价格.厂商.价格.商品分类(比如:速冻.日货.包装食品.饮料等) 功能要求: 注册功能(账号及密码存入数据库中) 商品信息的录入功能: 商品分类的查询功能 ...
1.22 实例：商品信息查询
综合一维数组和二维数组的相关知识,以及数组排序的多种算法来实现商品信息查询的功能. 假设在仓库系统中,每件商品都有 3 个库存信息,分别是入库量.出库量和当前库存量.定义一个一维数组来存储 5 件商品 ...
Java商品信息查询
使用一维数组和二维数组的相关知识,以及数组排序的多种算法来实现商品信息查询的功能. 假设在仓库系统中,每件商品都有 3 个库存信息,分别是入库量.出库量和当前库存量.定义一个一维数组来存储 5 件商品 ...
江湖小白之一起学Python （五）爬取淘宝商品信息
趁热需打铁,随着这几天的鸡血澎湃,我们来实现一下爬取淘宝商品信息,我记得几年前曾用python写了下抓取淘宝天猫,京东,拍拍的爬虫,专门采集商品信息,图片,评论及评论图片,我还用pyqt开发了个客户端 ...
python获取登录按钮_Python：Selenium模拟Chrome浏览器抓取淘宝商品信息
对于采用异步加载技术的网页,有时候想通过逆向工程的方式来设计爬虫进行爬取会比较困难,因此,要想通过python获取异步加载数据往往可以使用Selenium模拟浏览器的方式来获取. Selenium是一 ...
python+scrapy简单爬取淘宝商品信息
python结合scrapy爬取淘宝商品信息一.功能说明: 已实现功能: 通过scrapy接入selenium获取淘宝关键字搜索内容下的商品信息. 待扩展功能: 爬取商品中的全部其他商品信息. 二. ...

商品信息页面放大镜功能

商品信息页面放大镜功能相关推荐

最新文章

热门文章