实现放大镜的效果

在这里插入图片描述

 <!--内容区域开始--><div id="content"><!--版心元素--><div class="contentMain"><!--路径导航开始--><div id="navPath"></div><!--路径导航结束--><!--中间区域开始--><div id="center"><!--左侧放大镜开始--><div id="left"><!--上边--><div id="leftTop"><!--小图框--><div id="smallPic"><!--小图片--><img src="images/s1.png" alt=""><!--蒙版元素--></div><!--大图框--></div><!--下边--></div><!--左侧放大镜结束--><!--右侧商品详情区域开始--><!--右侧商品详情区域结束--></div><!--中间区域结束--></div></div><!--内容区域结束-->

js代码

//作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function () {

//路径导航的数据渲染
navPathDataBind();
function navPathDataBind() {/*** 思路：* 1、先获取路径导航的页面元素（navPath）* 2、再来获取所需要的数据（data.js->goodData.path）* 3、由于数据是需要动态产生的，那么相应的DOM元素也应该是动态产生的，含义需要根据数据的数量来进行创建DOM元素* 4、在遍历数据创建DOM元素的最后一条，只创建a标签，而不创建i标签*///1.获取页面导航的元素对象var navPath = document.querySelector('#wrapper #content .contentMain #navPath');//2.获取数据var path = goodData.path;//3.遍历数据for (var i = 0; i < path.length; i++) {if (i == path.length - 1) {//只需要创建a且没有href属性var aNode = document.createElement("a");aNode.innerText = path[i].title;navPath.appendChild(aNode);} else {//4.创建a标签var aNode = document.createElement("a");aNode.href = path[i].url;aNode.innerText = path[i].title;//5.创建i标签var iNode = document.createElement('i');iNode.innerText = '/';//6.让navPath元素来追加a和inavPath.appendChild(aNode);navPath.appendChild(iNode);}}
}//放大镜的移入、移出效果
bigClassBind();
function bigClassBind(){/*** 思路：* 1、获取小图框元素对象，并且设置移入事件(onmouseenter)* 2、动态的创建蒙版元素以及大图框和大图片元素* 3、移出时(onmouseleave)需要移除蒙版元素和大图框*///1.获取小图框元素var smallPic = document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic');//获取leftTop元素var leftTop = document.querySelector('#wrapper #content .contentMain #center #left #leftTop');//2.设置移入事件smallPic.onmouseenter = function(){//3. 创建蒙版元素var maskDiv = document.createElement('div');maskDiv.className = "mask";//4.创建大图框元素var BigPic = document.createElement('div');BigPic.id = "bigPic";//5.创建大图片元素var BigImg = document.createElement('img');BigImg.src = "images/b1.png";//6.大图框来追加大图片BigPic.appendChild(BigImg);//7.让小图框来追加蒙版元素smallPic.appendChild(maskDiv);//8.让leftTop元素追加大图框leftTop.appendChild(BigPic);//设置移动事件smallPic.onmousemove = function(event){//event.clientX: 鼠标点距离浏览器左侧X轴的值//getBoundingClientRect().left:小图框元素距离浏览器左侧可视left值//offsetWidth:为元素的占位宽度var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;//判断if(left < 0){left = 0;}else if(left > smallPic.clientWidth - maskDiv.offsetWidth){left = smallPic.clientWidth - maskDiv.offsetWidth;}if(top < 0){top = 0;}else if(top > smallPic.clientHeight - maskDiv.offsetHeight){top = smallPic.clientHeight - maskDiv.offsetHeight;}//设置left和top属性maskDiv.style.left = left + "px";maskDiv.style.top = top + "px";//移动的比例关系 = 蒙版元素移动的距离  /  大图片元素移动的距离//蒙版元素移动的距离 = 小图框宽度 – 蒙版元素的宽度//大图片元素移动的距离 = 大图片宽度 – 大图框元素的宽度var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (BigImg.offsetWidth - BigPic.clientWidth);console.log(scale);  //0.495BigImg.style.left = -left / scale + "px";BigImg.style.top = -top / scale + "px";}//设置移出事件smallPic.onmouseleave = function(){//让小图框移除蒙版元素smallPic.removeChild(maskDiv);//让leftTop元素移除大图框leftTop.removeChild(BigPic);}}
}

}

   #center{margin: 5px 0 15px;//左侧放大镜开始#left{width: 400px;float: left;//上边#leftTop{width: 400px;position: relative;//小图框#smallPic{width: 400px;height: 400px;border:1px solid #dfdfdf;position: relative;img{}//蒙版元素.mask{width: 200px;height: 200px;background: rgba(255, 255, 255, .5);border:1px solid #ddd;position: absolute;left:0px;top:0px;}}//大图框#bigPic{width: 400px;height: 400px;border:1px solid #ddd;left:420px;top:0px;position: absolute;overflow: hidden;//大图片img{width: 800px;height: 800px;position: absolute;left:0px;top:0px;}}}}}

数据

var goodData = {
path: [
{
title: “手机、数码、通讯”,
url: “###”
}, {
title: “手机”,
url: “###”
}, {
title: “Apple苹果”,
url: “###”
}, {
title: “iphone 6S系”,
}
],
imagessrc: [
{ b: “./images/b1.png”, s: “./images/s1.png” },
{ b: “./images/b2.png”, s: “./images/s2.png” },
{ b: “./images/b3.png”, s: “./images/s3.png” },
{ b: “./images/b1.png”, s: “./images/s1.png” },
{ b: “./images/b2.png”, s: “./images/s2.png” },
{ b: “./images/b3.png”, s: “./images/s3.png” },
{ b: “./images/b1.png”, s: “./images/s1.png” },
{ b: “./images/b2.png”, s: “./images/s2.png” },
{ b: “./images/b3.png”, s: “./images/s3.png” },
{ b: “./images/b1.png”, s: “./images/s1.png” },
{ b: “./images/b2.png”, s: “./images/s2.png” },
{ b: “./images/b3.png”, s: “./images/s3.png” },
{ b: “./images/b1.png”, s: “./images/s1.png” },
{ b: “./images/b2.png”, s: “./images/s2.png” }
],
goodsDetail: {
title: “Apple iPhone 6s（A1700）64G玫瑰金色移动通信电信4G手机bbb123”,
recommend: “推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返”,
price: 5299,
promoteSales: {
type: “加价购”,
content: “满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品”
},
support: “以旧换新，闲置手机回收 4G套餐超值抢礼品购”,
address: “广东省深圳市宝安区”,
evaluateNum: 670000,
crumbData: [
{
“title”: “选择颜色”,
“data”: [
{
type: “金色”,
changePrice: 0
},
{
type: “银色”,
changePrice: 40
},
{
type: “黑色”,
changePrice: 90
},
]
},
{
“title”: “内存容量”,
“data”: [
{
type: “16G”,
changePrice: 0
},
{
type: “64G”,
changePrice: 300
},
{
type: “128G”,
changePrice: 900
},
{
type: “256G”,
changePrice: 1300
},
]
},
{
“title”: “选择版本”,
“data”: [
{
type: “公开版”,
changePrice: 0
},
{
type: “移动版”,
changePrice: -1000
}
]
},
{
“title”: “购买方式”,
“data”: [
{
type: “官方标配”,
changePrice: 0
},
{
type: “优惠移动版”,
changePrice: -240
},
{
type: “电信优惠版”,
changePrice: -390
},
]
}
]
}
}
在这里插入图片描述