商品信息页面放大镜功能
主要是针对商品进行放大功能
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获取淘宝关键字搜索内容下的商品信息. 待扩展功能: 爬取商品中的全部其他商品信息. 二. ...
最新文章
- pytorch .item_pytorch + SGD
- 浅析如何从吸引蜘蛛爬取的角度进行网站内容优化建设
- Sign In and Sign Out
- linux依据时间过滤文件,详解Linux查找目录下的按时间过滤的文件
- python-类思想-实现简单增删查改
- 日均5亿查询量的京东订单中心,为什么舍MySQL用ElasticSearch?
- VB6 mysql二进制读取,vb6关于VB以二进制(binary)方式读取文本内容
- 转:VC++获取屏幕大小第一篇 像素大小GetSystemMetrics
- c/c++ 宏中#和##的用法
- 6 爬虫 Scrapy 爬取图片 请求传参 核心组件 中间件
- SICP练习1.17
- 51单片机电子琴编码 — 《断桥残雪》《庐州月》
- C# 重写(override)
- Word Embedding与Word2Vec学习
- 解读Conflux的共识机制
- 无聊的游戏 Beta 0.1
- Java程序员跳槽的经验开怀之谈(现在很多大厂都在裁员,你懂的)
- Beyond Compare4过期使用方法
- java中的“我”不是“我”,NaN特殊标识以及正无穷+负无穷应该等于多少?
- Gin工程项目目录结构
热门文章
- python paramiko 远程调用 常见问题总结
- 喜欢的歌——明天你好(牛奶咖啡)
- 零基础学板绘怎么画人体
- 精简windows的工具-nLite
- cesium中轨道六根数的参数命名
- 【音视频】JNI 引入Android项目
- 怎样去学习——认识自己
- 和芯星通2019秋招面试
- Execution Error,return code 2 from org.apache.haddop.hive.ql.exec.mr.MapRedTask解决办法
- hualinux ros 1.13:RouterOS脚本(三):命令行结构