网站源码破解版网站快照优化公司
这是我学习JS的第11天了，，，我现在赶着周末学JS，然后还有二十多天就期末了呵呵呵。。。
图片切换模块
思路分析：
这是实现的代码，建议还是把不同的变量定义出来比较合适：
//获取三个盒子// 小盒子const small = document.querySelector('.small')// 中盒子const middle = document.querySelector('.middle')// 大盒子const large = document.querySelector('.large')let activeElement = nullsmall.addEventListener('mouseover', function (e) {if (e.target.tagName === 'IMG') {// 排他const parent = e.target.parentNodeif(activeElement){activeElement.classList.remove('active')}// 当前元素的父亲添加parent.classList.add('active')activeElement = parent//让中等盒子里面的图片.src更换为小图片srcmiddle.querySelector('img').src = e.target.srclarge.style.backgroundImage = `url(${e.target.src})`}})这是原视频的代码，虽然后面好像又能切换图片了但是为什么呢？？？？？
// 1. 获取三个盒子// 2. 小盒子 图片切换效果const small = document.querySelector('.small')// 中盒子const middle = document.querySelector('.middle')// 大盒子const large = document.querySelector('.large')// 2. 事件委托small.addEventListener('mouseover', function (e) {if (e.target.tagName === 'IMG') {// console.log(111)// 排他 干掉以前的 active li 上面this.querySelector('.active').classList.remove('active')// 当前元素的爸爸添加 activee.target.parentNode.classList.add('active')// 拿到当前小图片的 src// console.log(e.target.src)// 让中等盒子里面的图片，src 更换为 小图片srcmiddle.querySelector('img').src = e.target.src// 大盒子更换背景图片large.style.backgroundImage = `url(${e.target.src})`}})奥我知道了，是有没有添加active类的情况，如果没有active类的话就完蛋了，就null了
呵呵。
放大镜效果
接下来我们实现放大镜的效果：
第一条已经做完了，现在来做第二个部分：
看看这个：
// 鼠标经过中等盒子，显示隐藏大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = 0// 显示函数function show() {clearTimeout(timeId)large.style.display = 'block'}// 隐藏函数function hide() {timeId = setTimeout(function () {large.style.display = 'none'}, 200)}// 鼠标经过大盒子，显示隐藏大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)然后我们来做黑色遮罩层跟着鼠标来回移动的效果，可以先添加显示和隐藏，移动再说吧：
middle.addEventListener('mousemove', function (e) {let x = e.pageX - middle.getBoundingClientRect().leftlet y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {//黑色盒子不是一直移动的// layer.style.left = x + 'px'// layer.style.top = y + 'px'//声明两个变量，黑色盒子移动的mx变量let mx = 0, my = 0if (x <= 100) {mx = 0}if (x >= 100 && x <= 300) {mx = x - 100}if (x > 300) {mx = 200}layer.style.left = mx + 'px'if (y <= 100) {my = 0}if (y >= 100 && y <= 300) {my = y -100}if (y > 300) {my = 200}layer.style.top = my + 'px'}
大图和小图一起移动：
//大图和小图一起移动,两倍关系large.style.backgroundPositionX = -2 *mx + 'px' large.style.backgroundPositionY = -2 *my + 'px'JS部分代码：
// 1. 获取三个盒子// 2. 小盒子 图片切换效果const small = document.querySelector('.small')// 中盒子const middle = document.querySelector('.middle')// 大盒子const large = document.querySelector('.large')// 2. 事件委托small.addEventListener('mouseover', function (e) {if (e.target.tagName === 'IMG') {// console.log(111)// 排他 干掉以前的 active li 上面this.querySelector('.active').classList.remove('active')// 当前元素的爸爸添加 activee.target.parentNode.classList.add('active')// 拿到当前小图片的 src// console.log(e.target.src)// 让中等盒子里面的图片，src 更换为 小图片srcmiddle.querySelector('img').src = e.target.src// 大盒子更换背景图片large.style.backgroundImage = `url(${e.target.src})`}})// 3. 鼠标经过中等盒子， 显示隐藏 大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = null// 显示函数 显示大盒子function show() {// 先清除定时器clearTimeout(timeId)large.style.display = 'block'}// 隐藏函数 隐藏大盒子function hide() {timeId = setTimeout(function () {large.style.display = 'none'}, 200)}// 4. 鼠标经过大盒子， 显示隐藏 大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)// 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层const layer = document.querySelector('.layer')middle.addEventListener('mouseenter', function () {layer.style.display = 'block'})middle.addEventListener('mouseleave', function () {layer.style.display = 'none'})// 6.移动黑色遮罩盒子middle.addEventListener('mousemove', function (e) {// let x = 10, y = 20// console.log(11)// 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标// console.log(e.pageX)鼠标在页面中的坐标// middle 中等盒子的坐标// console.log(middle.getBoundingClientRect().left)let x = e.pageX - middle.getBoundingClientRect().leftlet y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop// console.log(x, y)// 黑色遮罩移动 在 middle 盒子内 限定移动的距离if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {// 黑色盒子不是一直移动的// 声明2个变量 黑色盒子移动的 mx my变量 let mx = 0, my = 0if (x < 100) mx = 0if (x >= 100 && x <= 300) mx = x - 100if (x > 300) mx = 200if (y < 100) my = 0if (y >= 100 && y <= 300) my = y - 100if (y > 300) my = 200layer.style.left = mx + 'px'layer.style.top = my + 'px'// 大盒子的背景图片要跟随 中等盒子移动 存在的关系是 2倍 large.style.backgroundPositionX = -2 * mx + 'px'large.style.backgroundPositionY = -2 * my + 'px'}})全部代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> --><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head><body><!-- 项部导航 --><div class="xtx_topnav"><div class="wrapper"><!-- 顶部导航 --><ul class="xtx_navs"><li><a href="javascript:;">请先登录</a></li><li><a href="javascript:;">免费注册</a></li><li><a href=".javascript:;">我的订单</a></li><li><a href="javascript:;">会员中心</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">在线客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li></ul></div></div><!-- 头部 --><div class="xtx_header"><div class="wrapper"><!-- 网站Logo --><h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1><!-- 主导航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="javascript:;">首页</a></li><li><a href="javascript:;">生鲜</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">餐厨</a></li><li><a href="javascript:;">电器</a></li><li><a href="javascript:;">居家</a></li><li><a href="javascript:;">洗护</a></li><li><a href="javascript:;">孕婴</a></li><li><a href="javascript:;">服装</a></li></ul></div><!-- 站内搜索 --><div class="xtx_search clearfix"><!-- 购物车 --><a href="javascript:;" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜" onclick="location.href='./search.html'"></div></div></div></div><div class="xtx-wrapper"><div class="container"><!-- 面包屑 --><div class="xtx-bread"><a href="javascript:;"> 首页 > </a><a href="javascript:;"> 电子产品 > </a><a href="javascript:;"> 电视 > </a><span>小米电视4A 32英寸</span></div><!-- 商品信息 --><div class="xtx-product-info"><div class="left"><div class="pictrue"><div class="middle"><img src="./images/1.jpg" alt=""><div class="layer"></div></div><div class="small"><ul><li class="active"><img src="./images/1.jpg" alt=""></li><li><img src="./images/2.jpg" alt=""></li><li><img src="./images/3.jpg" alt=""></li><li><img src="./images/4.jpg" alt=""></li><li><img src="./images/5.jpg" alt=""></li></ul></div><div class="large"></div></div><div class="other"><ul><li><p>销量人气</p><p>1999+</p><p>销量人气</p></li><li><p>商品评价</p><p>999+</p><p>查看评价</p></li><li><p>收藏人气</p><p>299+</p><p><a href="javascript:;">收藏商品</a></p></li><li><p>品牌信息</p><p>小米</p><p><a href="javascript:;">品牌主页</a></p></li></ul></div></div><div class="right"><h3 class="name">小米电视4A 32英寸</h3><p class="desc">全面屏设计 / 高清分辨率 / 海量内容 / 1G+4G大内存 / 多核处理器</p><p class="price"><span class="now">¥1899</span><span class="old">¥2999</span></p><div class="address"><div class="item"><div class="dt">促销</div><div class="dd">12月好物放送，App领券购买直降120元</div></div><div class="item"><div class="dt">配送</div><div class="dd">至<div class="box"><span>陕西 西安 <i></i></span></div></div></div><div class="item"><div class="dt">服务</div><div class="dd"><span class="fw">无忧退货</span><span class="fw">快速退款</span><span class="fw">免费包邮</span><a href="#" class="lj">了解详情</a></div></div></div><div class="attrs"><div class="item"><div class="dt">颜色</div><div class="dd"><img src="./uploads/img/cate-06.png" alt=""><img src="./uploads/img/cate-07.png" alt=""></div></div><div class="item"><div class="dt">颜色</div><div class="dd"><span class="size">22英寸</span><span class="size">42英寸</span><span class="size">52英寸</span><span class="size">62英寸</span></div></div><div class="item"><div class="dt">数量</div><div class="dd"><div class="num"><a href="javascript:;">-</a><input type="text" value="1"><a href="javascript:;">+</a></div></div></div><div class="item"><a class="buy" href="javascript:;">立即购买</a></div></div></div></div><!-- 同类产品推荐 --><div class="xtx-relevant-product"><h3>同类产品推荐</h3><ul><li><a href="#"><img src="./uploads/history_goods_1.jpg" alt=""><p class="name">USB Type C数据线</p><p class="desc">快速充电，稳定传输</p><p class="price">¥39</p></a></li><li><a href="#"><img src="./uploads/history_goods_2.jpg" alt=""><p class="name">红米Note 5A 高配版</p><p class="desc">1600万像素柔光自拍</p><p class="price">¥1899</p></a></li><li><a href="#"><img src="./uploads/history_goods_3.jpg" alt=""><p class="name">VGA网口多功能转接器</p><p class="desc">小巧便携，节省桌面空间</p><p class="price">¥19</p></a></li><li><a href="#"><img src="./uploads/history_goods_4.jpg" alt=""><p class="name">笔记本Pro 15.6"</p><p class="desc">全金属强化机身搭配独显</p><p class="price">¥4899</p></a></li></ul><a href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a><a href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a></div><!-- 商品详情 --><div class="xtx-product-detail"><div class="main"><div class="cont"><div class="tab-head"><a href="javascript:;">商品详情</a><a href="javascript:;">商品评价<span>（998+）</span></a></div><div class="tab-pane"><!-- 静态属性 --><div class="attrs"><div class="item"><span>商品名称：</span><span>小米L32M5-AZ </span></div><div class="item"><span>商品编号：</span><span>4620979 </span></div><div class="item"><span>商品毛重：</span><span>8.0kg </span></div><div class="item"><span>商品产地：</span><span>中国大陆 </span></div><div class="item"><span>屏幕尺寸：</span><span>32英寸及以下 </span></div><div class="item"><span>能效等级：</span><span>三级能效 </span></div><div class="item"><span>电视类型：</span><span>人工智能 </span></div><div class="item"><span>选购指数：</span><span>6.9-6.0 </span></div><div class="item"><span>观看距离：</span><span>2m以下（≤32英寸）</span></div></div><!-- 详情内容 --><div class="detail"><img src="https://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg" alt=""data-v-2c43c764=""><img src="https://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpg"alt="" data-v-2c43c764=""><imgsrc="https://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt=""data-v-2c43c764=""><img src="https://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpg"alt="" data-v-2c43c764=""><imgsrc="https://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg" alt=""data-v-2c43c764=""><img src="https://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpg"alt="" data-v-2c43c764=""></div></div><div class="tab-pane" style="display: none;">评价</div></div><!-- 注意事项 --><div class="warn"><h3>注意事项</h3><p class="tit">• 购买运费如何收取？ </p><p>单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p><br><br><p class="tit">• 使用什么快递发货? </p><p>默认使用顺丰快递发货(个别商品使用其他快递） </p><p>配送范围覆盖全国大部分地区(港澳台地区除外）。 </p><br><br><p class="tit">• 如何申请退货? </p><p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p><p>2.内裤和食品等特殊商品无质量问题不支持退货； </p><p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p><p>4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p></div></div><div class="aside"><div class="tit">24小时热销榜</div><div class="product"><img src="./uploads/fresh_goods_3.jpg" alt=""><p class="name">USB Type C数据线</p><p class="desc">快速充电，稳定传输</p><p class="price">¥29</p></div><div class="product"><img src="./uploads/fresh_goods_3.jpg" alt=""><p class="name">USB Type C数据线</p><p class="desc">快速充电，稳定传输</p><p class="price">¥29</p></div><div class="product"><img src="./uploads/fresh_goods_3.jpg" alt=""><p class="name">USB Type C数据线</p><p class="desc">快速充电，稳定传输</p><p class="price">¥29</p></div><div class="tit">专题推荐</div><div class="special"><img src="./uploads/discuss_goods_1.jpg" alt=""><p class="name">一往无前，诞生于崛起</p></div><div class="special"><img src="./uploads/discuss_goods_1.jpg" alt=""><p class="name">一往无前，诞生于崛起</p></div><div class="special"><img src="./uploads/discuss_goods_1.jpg" alt=""><p class="name">一往无前，诞生于崛起</p></div></div></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 联系我们 --><div class="contact clearfix"><dl><dt>客户服务</dt><dd class="chat">在线客服</dd><dd class="feedback">问题反馈</dd></dl><dl><dt>关注我们</dt><dd class="weixin">公众号</dd><dd class="weibo">微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口号 --><div class="slogan"><a href="javascript:;" class="price">价格亲民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品质新鲜</a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight © 小兔鲜儿</p></div></div></div></div><script>// 1. 获取三个盒子// 2. 小盒子 图片切换效果const small = document.querySelector('.small')// 中盒子const middle = document.querySelector('.middle')// 大盒子const large = document.querySelector('.large')// 2. 事件委托small.addEventListener('mouseover', function (e) {if (e.target.tagName === 'IMG') {// console.log(111)// 排他 干掉以前的 active li 上面this.querySelector('.active').classList.remove('active')// 当前元素的爸爸添加 activee.target.parentNode.classList.add('active')// 拿到当前小图片的 src// console.log(e.target.src)// 让中等盒子里面的图片，src 更换为 小图片srcmiddle.querySelector('img').src = e.target.src// 大盒子更换背景图片large.style.backgroundImage = `url(${e.target.src})`}})// 鼠标经过中等盒子，显示隐藏大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = 0// 显示函数function show() {clearTimeout(timeId)large.style.display = 'block'}// 隐藏函数function hide() {timeId = setTimeout(function () {large.style.display = 'none'}, 200)}// 鼠标经过大盒子，显示隐藏大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)//鼠标经过中等盒子，显示隐藏黑色遮罩层const layer = document.querySelector('.layer')middle.addEventListener('mouseenter', function () {layer.style.display = 'block'})middle.addEventListener('mouseleave', function () {layer.style.display = 'none'})//移动黑色遮罩层middle.addEventListener('mousemove', function (e) {let x = e.pageX - middle.getBoundingClientRect().leftlet y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop//遮罩层在middle盒子内限定移动的距离if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {//黑色盒子不是一直移动的// layer.style.left = x + 'px'// layer.style.top = y + 'px'//声明两个变量，黑色盒子移动的mx变量let mx = 0, my = 0if (x <= 100) {mx = 0}if (x >= 100 && x <= 300) {mx = x - 100}if (x > 300) {mx = 200}layer.style.left = mx + 'px'if (y <= 100) {my = 0}if (y >= 100 && y <= 300) {my = y - 100}if (y > 300) {my = 200}layer.style.top = my + 'px'//大图和小图一起移动,两倍关系large.style.backgroundPositionX = -2 * mx + 'px'large.style.backgroundPositionY = -2 * my + 'px'}})</script>
</body></html>