案例：电商放大镜写法

今天来写常见的放大镜功能，这是各个电商网站经常使用的东西
样式

    <style>* {margin: 0;padding: 0;}.box {width: 350px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.big img {position: absolute;width: 800px;}.mask {width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0px;left: 0px;cursor: move;display: none;}.small {position: relative;}</style>
</head><body><div class="box" id="box"><div class="small"><img src="data:images/small.jpg" width="350" alt="" /><div class="mask"></div></div><div class="big"><img src="data:images/big.jpg" alt="" /></div></div>
</body>

**注意:**这里是两张一样的图片，只是大小不同。还有要注意的是想要能够移动的部分一定要加定位这样才能移动。

js部分

1.首先要拿到要用的元素

      var mask = document.querySelector('.mask')var big = document.querySelector('.big')var small = document.querySelector('.small')var box = document.getElementById('box')var bigImg = big.getElementsByTagName('img')[0]

鼠标经过的时候显示 mask和bigBox ，当鼠标离开box的时候隐藏mask和bigBox

      box.addEventListener('mouseenter', function () {mask.style.display = 'block'big.style.display = 'block'})box.addEventListener('mouseleave', function () {mask.style.display = 'none'big.style.display = 'none'})

这样遮罩层和右边大图就会随着鼠标一起出现消失了。
3.mask(小图遮罩层)跟着鼠标走

box.addEventListener('mousemove', function (e) {// 计算鼠标在盒子里的距离var x = e.pageX - this.offsetLeftvar y = e.pageY - this.offsetTop//    mask移动的距离，除2是为了让鼠标在mask中心var maskX = x - mask.offsetWidth / 2var maskY = y - mask.offsetHeight / 2//限制mask范围不让超出小图范围if (maskX <= 0) {maskX = 0;} else if (maskX >= small.offsetWidth - mask.offsetWidth) {//mask在盒子里的移动距离maskX = small.offsetWidth - mask.offsetWidth}if (maskY <= 0) {maskY = 0;} else if (maskY >= small.offsetHeight - mask.offsetHeight) {//mask在盒子里的移动距离maskY = small.offsetHeight - mask.offsetHeight}mask.style.left = maskX + 'px'mask.style.top = maskY + 'px'

4.大图跟着mask走

    // 3 当mask移动的时候，让大图片移动// 求 大图片移动的距离// 大图片移动的距离 = mask移动的距离  * 大图片最大能够移动的距离/ mask最大能够移动的距离var bigMaxX = bigImg.offsetWidth - big.offsetWidthvar bigMaxY = bigImg.offsetHeight - big.offsetHeightvar bigX = maskX * bigMaxX / (small.offsetWidth - mask.offsetWidth)var bigY = maskY * bigMaxY / (small.offsetHeight - mask.offsetHeight)bigImg.style.left = -bigX + 'px'bigImg.style.top = -bigY + 'px'

js全部代码

    <script>var mask = document.querySelector('.mask')var big = document.querySelector('.big')var small = document.querySelector('.small')var box = document.getElementById('box')var bigImg = big.getElementsByTagName('img')[0]// 1 鼠标经过的时候 显示 mask和bigBox ， 当鼠标离开box的时候隐藏mask和bigBox// mouseenter   mouseleave     不会触发事件冒泡// mouseover   mouseout        会触发事件冒泡box.addEventListener('mouseenter', function () {mask.style.display = 'block'big.style.display = 'block'})box.addEventListener('mouseleave', function () {mask.style.display = 'none'big.style.display = 'none'})// mask跟着鼠标走box.addEventListener('mousemove', function (e) {// 计算鼠标在盒子里的距离var x = e.pageX - this.offsetLeftvar y = e.pageY - this.offsetTop//    mask移动的距离var maskX = x - mask.offsetWidth / 2var maskY = y - mask.offsetHeight / 2//限制mask范围if (maskX <= 0) {maskX = 0;} else if (maskX >= small.offsetWidth - mask.offsetWidth) {//mask在盒子里的移动距离maskX = small.offsetWidth - mask.offsetWidth}if (maskY <= 0) {maskY = 0;} else if (maskY >= small.offsetHeight - mask.offsetHeight) {//mask在盒子里的移动距离maskY = small.offsetHeight - mask.offsetHeight}mask.style.left = maskX + 'px'mask.style.top = maskY + 'px'// 3 当mask移动的时候，让大图片移动// 求 大图片移动的距离// 大图片移动的距离 = mask移动的距离  * 大图片最大能够移动的距离/ mask最大能够移动的距离var bigMaxX = bigImg.offsetWidth - big.offsetWidthvar bigMaxY = bigImg.offsetHeight - big.offsetHeightvar bigX = maskX * bigMaxX / (small.offsetWidth - mask.offsetWidth)var bigY = maskY * bigMaxY / (small.offsetHeight - mask.offsetHeight)bigImg.style.left = -bigX + 'px'bigImg.style.top = -bigY + 'px'})</script>

案例：电商放大镜写法相关推荐

react基础06--react综合案例-电商网站导航
react基础06--react综合案例-电商网站导航 1 介绍 2 案例设计模块 2.1 分类导航数据模型设计 2.2 一级分类导航切换高亮效果 2.3 显示二级分类导航 2.4 路由跳转到二级导航 ...
数据分析案例--电商指标的实际应用
数据分析案例--天猫订单分析数据分析的一般过程数据来源及内容天猫订单分析过程数据分析的一般过程明确项目背景,待解决的问题 : 分析逻辑,画出逻辑树,明确分析过程中的指标 : 提数分析,同时进 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
项目案例——电商网站
初学程序结构写的一个简单网站,使用了大量的循环语句,代码重复较多,因此参考度不大. 下面是完整代码: """ 用户登录的电商网站 """ # ...
实验八项目案例-电商数据分析
电商大数据离线计算第1关:统计用户流失情况任务描述相关知识数据文件格式说明用户流失情况编程要求测试说明代码实现第2关:统计所有商品点击量排行任务描述相关知识数据文件格式说明商 ...
数据分析案例 - 电商行业数据分析
电商静态页面（详细讲解）
目录实现步骤实现代码今日金句实现步骤 1.在容器中引入图片(小图片) 2.设置图片大小按照总图片大小以及间隔来设置容器大小 3.将图片和容器脱离文档流 4.插入向左向右控制的div 5.将所 ...
电商的1000+篇文章总结
电商的1000+篇文章总结本文收集和总结了有关电商的1000+篇文章,由于篇幅有限只能总结近期的内容,想了解更多内容可以访问:http://www.ai2news.com/, 其分享了有关AI的论文 ...
基于MaxCompute+开放搜索的电商、零售行业搜索开发实践
简介:搜索一直是电商行业流量来源的核心入口之一,如何搭建电商行业搜索并提升搜索效果,一直是电商行业开发者努力攻克的难题.基于传统数据库或开源引擎虽然能够搭建基础搜索服务,但随着商品数据的增多和业务流量 ...

案例：电商放大镜写法

js部分

js全部代码

案例：电商放大镜写法相关推荐

最新文章

热门文章