這是我學(xué)習(xí)JS的第11天了，，，我現(xiàn)在趕著周末學(xué)JS，然后還有二十多天就期末了呵呵呵。。。

圖片切換模塊

思路分析：

這是實現(xiàn)的代碼，建議還是把不同的變量定義出來比較合適：

 //獲取三個盒子// 小盒子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')}// 當(dāng)前元素的父親添加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')// 當(dāng)前元素的爸爸添加 activee.target.parentNode.classList.add('active')// 拿到當(dāng)前小圖片的 src// console.log(e.target.src)// 讓中等盒子里面的圖片，src 更換為   小圖片srcmiddle.querySelector('img').src = e.target.src// 大盒子更換背景圖片large.style.backgroundImage = `url(${e.target.src})`}})

?奧我知道了，是有沒有添加active類的情況，如果沒有active類的話就完蛋了，就null了

呵呵。

放大鏡效果

接下來我們實現(xiàn)放大鏡的效果：

第一條已經(jīng)做完了，現(xiàn)在來做第二個部分：

?

?看看這個：

 // 鼠標(biāo)經(jīng)過中等盒子，顯示隱藏大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = 0// 顯示函數(shù)function show() {clearTimeout(timeId)large.style.display = 'block'}// 隱藏函數(shù)function hide() {timeId = setTimeout(function () {large.style.display = 'none'}, 200)}// 鼠標(biāo)經(jīng)過大盒子，顯示隱藏大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)

然后我們來做黑色遮罩層跟著鼠標(biāo)來回移動的效果，可以先添加顯示和隱藏，移動再說吧：

?

 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'}

?

?大圖和小圖一起移動：

//大圖和小圖一起移動,兩倍關(guān)系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')// 當(dāng)前元素的爸爸添加 activee.target.parentNode.classList.add('active')// 拿到當(dāng)前小圖片的 src// console.log(e.target.src)// 讓中等盒子里面的圖片，src 更換為   小圖片srcmiddle.querySelector('img').src = e.target.src// 大盒子更換背景圖片large.style.backgroundImage = `url(${e.target.src})`}})// 3. 鼠標(biāo)經(jīng)過中等盒子， 顯示隱藏 大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = null// 顯示函數(shù) 顯示大盒子function show() {// 先清除定時器clearTimeout(timeId)large.style.display = 'block'}// 隱藏函數(shù) 隱藏大盒子function hide() {timeId = setTimeout(function () {large.style.display = 'none'}, 200)}// 4. 鼠標(biāo)經(jīng)過大盒子， 顯示隱藏 大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)// 5. 鼠標(biāo)經(jīng)過中等盒子，顯示隱藏 黑色遮罩層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)// 鼠標(biāo)在middle 盒子里面的坐標(biāo) = 鼠標(biāo)在頁面中的坐標(biāo) - middle 中等盒子的坐標(biāo)// console.log(e.pageX)鼠標(biāo)在頁面中的坐標(biāo)// middle 中等盒子的坐標(biāo)// 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 盒子內(nèi) 限定移動的距離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'// 大盒子的背景圖片要跟隨 中等盒子移動  存在的關(guān)系是 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><!-- 項部導(dǎo)航 --><div class="xtx_topnav"><div class="wrapper"><!-- 頂部導(dǎo)航 --><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"><!-- 網(wǎng)站Logo --><h1 class="xtx_logo"><a href="/">小兔鮮兒</a></h1><!-- 主導(dǎo)航 --><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><!-- 站內(nèi)搜索 --><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:;"> 電子產(chǎn)品 > </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">全面屏設(shè)計 / 高清分辨率 / 海量內(nèi)容 / 1G+4G大內(nèi)存 / 多核處理器</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領(lǐng)券購買直降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">服務(wù)</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">數(shù)量</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><!-- 同類產(chǎn)品推薦 --><div class="xtx-relevant-product"><h3>同類產(chǎn)品推薦</h3><ul><li><a href="#"><img src="./uploads/history_goods_1.jpg" alt=""><p class="name">USB Type C數(shù)據(jù)線</p><p class="desc">快速充電，穩(wěn)定傳輸</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網(wǎng)口多功能轉(zhuǎn)接器</p><p class="desc">小巧便攜，節(jié)省桌面空間</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"><!-- 靜態(tài)屬性 --><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>商品產(chǎn)地：</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>選購指數(shù)：</span><span>6.9-6.0 </span></div><div class="item"><span>觀看距離：</span><span>2m以下（≤32英寸）</span></div></div><!-- 詳情內(nèi)容 --><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元運費。（港澳臺地區(qū)需滿500元免郵費；不滿500元，每單收取30元運費) </p><br><br><p class="tit">? 使用什么快遞發(fā)貨? </p><p>默認(rèn)使用順豐快遞發(fā)貨(個別商品使用其他快遞） </p><p>配送范圍覆蓋全國大部分地區(qū)(港澳臺地區(qū)除外）。 </p><br><br><p class="tit">? 如何申請退貨? </p><p>1.自收到商品之日起30日內(nèi)，顧客可申請無憂退貨，退款將原路返還，不同的銀行處理時間不同，預(yù)計1-5個工作日到賬； </p><p>2.內(nèi)褲和食品等特殊商品無質(zhì)量問題不支持退貨； </p><p>3.退貨流程： 確認(rèn)收貨-申請退貨-客服審核通過-用戶寄回商品-倉庫簽收驗貨-退款審核-退款完成； </p><p>4.因小兔鮮兒產(chǎn)生的退貨，如質(zhì)量問題，退貨郵費由小兔鮮兒承擔(dān)，退款完成后會以現(xiàn)金券的形式報銷。因客戶個人原因產(chǎn)生的退貨，購買和寄回運費由客戶個人承擔(dān)。</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數(shù)據(jù)線</p><p class="desc">快速充電，穩(wěn)定傳輸</p><p class="price">￥29</p></div><div class="product"><img src="./uploads/fresh_goods_3.jpg" alt=""><p class="name">USB Type C數(shù)據(jù)線</p><p class="desc">快速充電，穩(wěn)定傳輸</p><p class="price">￥29</p></div><div class="product"><img src="./uploads/fresh_goods_3.jpg" alt=""><p class="name">USB Type C數(shù)據(jù)線</p><p class="desc">快速充電，穩(wěn)定傳輸</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"><!-- 聯(lián)系我們 --><div class="contact clearfix"><dl><dt>客戶服務(wù)</dt><dd class="chat">在線客服</dd><dd class="feedback">問題反饋</dd></dl><dl><dt>關(guān)注我們</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>服務(wù)熱線</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">品質(zhì)新鮮</a></div><!-- 版權(quán)信息 --><div class="copyright"><p><a href="javascript:;">關(guān)于我們</a><a href="javascript:;">幫助中心</a><a href="javascript:;">售后服務(wù)</a><a href="javascript:;">配送與驗收</a><a href="javascript:;">商務(wù)合作</a><a href="javascript:;">搜索推薦</a><a href="javascript:;">友情鏈接</a></p><p>CopyRight &copy; 小兔鮮兒</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')// 當(dāng)前元素的爸爸添加 activee.target.parentNode.classList.add('active')// 拿到當(dāng)前小圖片的 src// console.log(e.target.src)// 讓中等盒子里面的圖片，src 更換為   小圖片srcmiddle.querySelector('img').src = e.target.src// 大盒子更換背景圖片large.style.backgroundImage = `url(${e.target.src})`}})// 鼠標(biāo)經(jīng)過中等盒子，顯示隱藏大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = 0// 顯示函數(shù)function show() {clearTimeout(timeId)large.style.display = 'block'}// 隱藏函數(shù)function hide() {timeId = setTimeout(function () {large.style.display = 'none'}, 200)}// 鼠標(biāo)經(jīng)過大盒子，顯示隱藏大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)//鼠標(biāo)經(jīng)過中等盒子，顯示隱藏黑色遮罩層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盒子內(nèi)限定移動的距離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'//大圖和小圖一起移動,兩倍關(guān)系large.style.backgroundPositionX = -2 * mx + 'px'large.style.backgroundPositionY = -2 * my + 'px'}})</script>
</body></html>