目录
1. 项目搭建1.1 在项目开始之前，先做好准备工作，创建这样的文件目录1.1.1 css文件夹1.1.2 images文件1.1.3 uploads文件 1.2 HTML结构1.2.1 头部引入文件1.2.2 主体结构1.2.3product-dev.html代码示例： 1.3 css样式1.3.1 页面初始化（base)样式1.3.2 公共样式（common)样式1.3.3 首页样式（product-dev)样式 2. javascript 源码示例2.1效果示例：1. 项目搭建
1.1 在项目开始之前，先做好准备工作，创建这样的文件目录
1.1.1 css文件夹
包含三个css文件，分别是base.css、common.css、product.css。
1.1.2 images文件
里面放一些固定的图片
1.1.3 uploads文件
里面放一些固定的图片
1.2 HTML结构
1.2.1 头部引入文件
1.2.2 主体结构
1.2.3product-dev.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="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化样式 --><link rel="stylesheet" href="./css/base.css"><!-- 引入公共样式 --><link rel="stylesheet" href="./css/common.css"><!-- 引入购物样式 --><link rel="stylesheet" href="./css/product.css"><!-- 引入字体图标 --><link rel="stylesheet" href="/t/font_2143783_iq6z4ey5vu.css"></head><body><!-- 头部开始 --><!-- 快捷导航栏开始 --><div class="shortcut sk"><div class="w"><ul><li><a href="javascript:;">请先登录</a></li><li class="sep">|</li><li><a href="javascript:;">免费注册</a></li><li class="sep">|</li><li><a href="javascript:;">我的订单</a></li><li class="sep">|</li><li><a href="javascript:;">会员中心</a></li><li class="sep">|</li><li><a href="javascript:;">帮助中心</a></li><li class="sep">|</li><li><a href="javascript:;">在线客服</a></li><li class="sep">|</li><li><a href="javascript:;">手机版</a></li></ul></div></div><!-- 快捷导航栏结束 --><!-- 主导航栏开始 --><div class="main_nav w"><div class="logo"><h1><a href="index.html" title="小兔鲜儿">小兔鲜儿</a></h1></div><nav class="nav"><ul><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></nav><div class="search"><input type="search" placeholder="搜一搜"></div><a href="javascript:;"><div class="car"><span>2</span></div></a></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" id="color"><img src="./uploads/cate-06.png" alt=""><img src="./uploads/cate-07.png" alt=""></div></div><div class="item"><div class="dt">颜色</div><div class="dd" id="size"><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:;" class="active" data-id="2">商品详情</a><a href="javascript:;" data-id="3">商品评价<span>（998+）</span></a></div><div class="tab-pane" style="display: block;"><!-- 静态属性 --><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./39d7f2407c90d0442566a719146ee9c1.jpg"alt="" data-v-2c43c764=""><imgsrc="https://yanxuan-item./7dfee58e7c6b3996badf368610ed62b1.jpg" alt=""data-v-2c43c764=""><imgsrc="https://yanxuan-item./d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt=""data-v-2c43c764=""><imgsrc="https://yanxuan-item./ac722b04bac337d8db695ee46f0c.jpg" alt=""data-v-2c43c764=""><imgsrc="https://yanxuan-item./c63e36faa0848ee37c825897f5cec179.jpg" alt=""data-v-2c43c764=""><imgsrc="https://yanxuan-item./e0f13dbf14c8a2f07e86bf3df3ca002b.jpg" alt=""data-v-2c43c764=""></div></div><div class="tab-pane" style="display: none;"><div class="goods-tabs"><div class="tabs-hd"><span>排序：</span><!-- tabs切换按钮 --><ul><li class="active"><a href="#">默认</a></li><li><a href="#">最新</a></li><li><a href="#">最热</a></li></ul></div><div class="tabs-bd"><!-- 默认tabs隐藏 切换show类名显示 --><!-- 默认评论模块 --><div class="tabs tabs-default show"><!-- tabs-item 每一个评论列表 --><div class="tabs-item"><div class="userInfo"><span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span><span class="username">兔****y</span></div><div class="tbs-body"><div class="score"><!-- 切换xingxing 和 xingxing1 可以改变星星样式 --><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing1"></i><i class="iconfont icon-xingxing1"></i><span class="attr">颜色：白色 尺寸：10cm 产地：美国</span></div><div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div><div class="comment-image"><div class="list"><a class="" href="javascript:;"><img src="./uploads/1.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/2.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/3.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/4.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/5.webp" alt=""></a></div><!----></div><div class="time"><span>-04-03 13:20:32</span><span class="zan"><i class="iconfont icon-dianzan"></i>74</span></div></div></div><!-- tabs-item 每一个评论列表 --><div class="tabs-item"><div class="userInfo"><span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span><span class="username">兔****y</span></div><div class="tbs-body"><div class="score"><!-- 切换xingxing 和 xingxing1 可以改变星星样式 --><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing1"></i><i class="iconfont icon-xingxing1"></i><span class="attr">颜色：白色 尺寸：10cm 产地：美国</span></div><div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div><div class="comment-image"><div class="list"><a class="" href="javascript:;"><img src="./uploads/1.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/2.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/3.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/4.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/5.webp" alt=""></a></div><!----></div><div class="time"><span>-04-03 13:20:32</span><span class="zan"><i class="iconfont icon-dianzan"></i>74</span></div></div></div><!-- tabs-item 每一个评论列表 --><div class="tabs-item"><div class="userInfo"><span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span><span class="username">兔****y</span></div><div class="tbs-body"><div class="score"><!-- 切换xingxing 和 xingxing1 可以改变星星样式 --><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing"></i><i class="iconfont icon-xingxing1"></i><i class="iconfont icon-xingxing1"></i><span class="attr">颜色：白色 尺寸：10cm 产地：美国</span></div><div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div><div class="comment-image"><div class="list"><a class="" href="javascript:;"><img src="./uploads/1.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/2.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/3.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/4.webp" alt=""></a><a class="" href="javascript:;"><img src="./uploads/5.webp" alt=""></a></div><!----></div><div class="time"><span>-04-03 13:20:32</span><span class="zan"><i class="iconfont icon-dianzan"></i>74</span></div></div></div></div><!-- 最新评论模块 --><div class="tabs tabs-new"></div><!-- 最热评论模块 --><div class="tabs tabs-hot"></div></div><!-- 翻页在这里 --><div class="xtx-pagination"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div></div></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><!-- 主体部分结束 --><footer><div class="ft w"><dl class="kefu"><dt>客服服务</dt><dd class="zaixian"><p><a href="javascript:;">在线客服</a></p></dd><dd class="wenti"><p><a href="javascript:;">问题反馈</a></p></dd></dl><dl class="guanzhu"><dt>关注我们</dt><dd class="gongzhong"><p><a href="javascript:;">公众号</a></p></dd><dd class="weibo"><p><a href="javascript:;">微博</a></p></dd></dl><dl class="xiazai"><dt>下载APP</dt><dd><img src="./uploads/qrcode.png" alt=""></dd><dd><p><a href="javascript:;">扫描二维码</a></p><p><a href="javascript:;">立马下载APP</a></p><button>下载页面</button></dd></dl><dl class="rexian"><dt>服务热线</dt><dd><p>400-0000-000</p></dd><dd><p>周一至周日 8:00-18:00</p></dd></dl></div><div class="fb"><div class="fb_t"><ul><li>价格亲民</li><li>物流快捷</li><li>品质新鲜</li></ul></div><div class="fb_b"><p><a href="javascript:;">关于我们</a><i>|</i><a href="javascript:;">帮助中心</a><i>|</i><a href="javascript:;">售后服务</a><i>|</i><a href="javascript:;">配送与验收</a><i>|</i><a href="javascript:;">商务合作</a><i>|</i><a href="javascript:;">搜索推荐</a><i>|</i><a href="javascript:;">友情链接</a></p><p><a href="javascript:;">CopyRight @ 小兔鲜儿</a></p></div></div></div></footer><a href=""></a><script>(function () {// 1、获取三个盒子// 1.1小盒子smallconst small = document.querySelector('.small')// 1.2获取中等盒子const middle = document.querySelector('.middle')// 1.3获取大盒子const large = document.querySelector('.large')// 2、小盒子利用事件委托的形式给里面的图片注册鼠标悬停事件//利用事件委托的形式子盒子必需要有冒泡行为，所以不用mouseentersmall.addEventListener('mouseover', function (e) {// 判断是不是悬停在图片上if (e.target.tagName === 'IMG') {// 移除所有类this.querySelector('.active').classList.remove('active')// 给图片的父级添加类e.target.parentNode.classList.add('active')// 中等盒子的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 timer = null// 封装移入show函数function show() {clearTimeout(timer)// 让大盒子显示出来large.style.display = 'block'}function hide() {timer = setTimeout(function () {large.style.display = 'none'}, 200)}// 4、给大盒子注册移入移除事件large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)// 5、移入中等盒子，黑色遮罩层出现// 获取layer遮罩层元素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) {// 算法// 用鼠标距离页面的位置减去盒子距离页面的位置得到鼠标在盒子内的位置// 如果父盒子有定位的话我们用offset就不合适了，所有我们使用getBoundingClientRectlet x = e.pageX - middle.getBoundingClientRect().left// 不过这个方法获取的是视口的位置，如果页面滚动了得到得结果就不一样了，所以我们还要减去滚动条得距离let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop// 判断盒子是否在中等盒子内移动let mx = 0, my = 0// 如果x小于100我们则不然遮罩层动if (x < 100) mx = 0// 如果在100和300之间，则让遮罩层动起来，但是需要让位置从0开始，鼠标就会出现在盒子中间if (x >= 100 && x < 300) mx = x - 100// 如果大于300则不能让盒子在动了，不然就超出中等盒子得范围了if (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'// 大盒子跟随中等盒子一起移动，由于大盒子的图片大小是中等盒子的两倍，所以*2large.style.backgroundPositionX = -2 * mx + 'px'large.style.backgroundPositionY = -2 * my + 'px'})})();</script></body></html>
1.3 css样式
1.3.1 页面初始化（base)样式
在默认的浏览器中有很多默认的样式，所以我们要对其进行清除并且设置自己的默认样式
代码示例：
box-sizing: border-box;}/* 去除常见标签默认的 margin 和 padding */body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input {margin: 0;padding: 0;}/* 设置网页统一的字体大小、行高、字体系列相关属性 */body {box-sizing: border-box;font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;}/* 去除列表默认样式 */ul,ol {list-style: none;}/* 去除默认的倾斜效果 */em,i {font-style: normal;}/* 去除a标签默认下划线，并设置默认文字颜色 */a {text-decoration: none;color: #333;}/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */img {vertical-align: middle;}/* 去除input默认样式 */input {border: none;outline: none;color: #333;}/* 双伪元素清除浮动 */.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}
1.3.2 公共样式（common)样式
.w {width: 1240px;margin: 0 auto;}/* 快捷导航栏开始 */.shortcut {height: 52px;background-color: #333;line-height: 52px;}.s {position: absolute;left: 0;top: 0;}.shortcut ul {float: right;}.shortcut li {float: left;}.shortcut li:nth-child(13)::before {content: '';display: inline-block;vertical-align: middle;width: 11px;height: 16px;margin-right: 5px;background-color: #27ba9b;background: url(../images/sprites.png) no-repeat -160px -70px;}.sep {color: #666;margin: 0 15px;}.shortcut li a {color: #dcdcdc;font-size: 14px;}.shortcut li a:hover {color: #27ba9b;}/* 快捷导航栏结束 *//* 主导航栏开始 */.main_nav {height: 130px;padding: 30px 0;}.logo {float: left;width: 207px;height: 70px;}.logo h1 a {display: block;width: 207px;height: 70px;font-size: 0;background: url(.././images/logo.png) no-repeat;background-size: 100%;}.nav {float: left;margin-top: 5px;margin-left: 35px;}.nav ul li {float: left;margin: 24px;}.nav ul li a {padding-bottom: 5px;}.nav ul li:hover a {border-bottom: 1px solid #27ba9b;color: #27ba9b;}.search {float: left;margin-left: 35px;border-bottom: 2px solid #e7e7e7;}.search::before {content: '';display: inline-block;vertical-align: middle;margin-top: -2px;width: 18px;height: 22px;background: url(.././images/sprites.png) no-repeat -79px -69px;}.search input {width: 172px;height: 30px;margin-top: 26px;padding-left: 30px;}.search input::placeholder {color: #ccc;}.car {position: relative;float: left;width: 23px;height: 23px;background-color: #27ba9b;margin-top: 30px;margin-left: 15px;background: url(.././images/sprites.png) no-repeat -119px -70px;}.car span {position: absolute;top: -8px;right: -10px;font-size: 13px;line-height: 14px;padding: 0 5px;background-color: #e26237;border-radius: 7px;color: #fff;}/* 主导航栏结束 *//* 底部模块开始 */footer {height: 645px;}.ft {height: 50%;}.ft dl {width: 25%;float: left;text-align: center;margin-top: 79px;color: #999;}.ft dl dt {margin-bottom: 30px;}.kefu dd,.guanzhu dd {display: inline-block;vertical-align: middle;width: 92px;height: 92px;border: 1px solid #eee;margin-right: 5px;}.kefu dd a,.guanzhu dd a {display: block;margin-top: 22px;width: 100%;height: 100%;font-size: 14px;color: #999;}.kefu dd a::before,.guanzhu dd a::before {display: block;width: 35px;height: 31px;content: '';margin: 0 auto;padding-bottom: 5px;background: url(../images/sprites.png) no-repeat;transition: all .5s;}.kefu .zaixian a::before {background-position: -250px -70px;}.kefu .zaixian a:hover::before {background-position: -204px -70px;}.kefu .wenti a::before {background-position: -350px -70px;}.kefu .wenti a:hover::before {background-position: -300px -70px;}.guanzhu .gongzhong a::before {background-position: -250px -15px;}.guanzhu .gongzhong a:hover::before {background-position: -205px -15px;}.guanzhu .weibo a::before {background-position: -350px -15px;}.guanzhu .weibo a:hover::before {background-position: -300px -15px;}.xiazai dd {width: 105px;height: 103px;display: inline-block;}.xiazai dd a {color: #999;font-size: 14px;}.xiazai dd button {width: 107px;height: 32px;background-color: #27ba9b;color: #FFF;margin-top: 10PX;border: none;cursor: pointer;}.xiazai dd img {width: 100%;height: 100%;border: 1px solid #eee;padding: 5px;margin-top: -60px;}.ft .rexian dt {margin-bottom: 40px;}.rexian dd:nth-of-type(1) {font-size: 22px;}.rexian dd:nth-of-type(2) {font-size: 15px;margin-top: 5px;}.fb {height: 50%;background-color: #333;}.fb .fb_t {height: 170px;line-height: 175px;width: 1393px;margin: 0 auto 40px;border-bottom: 1px solid #434343;text-align: center;}.fb .fb_t ul li {float: left;width: 33.33%;color: #fff;font-size: 28px;}.fb .fb_t ul li::before {content: '';display: inline-block;vertical-align: middle;width: 58px;height: 58px;background: url(../images/sprites.png) no-repeat;}.fb .fb_t ul li:nth-child(2):before {background-position: -65px 0;}.fb .fb_t ul li:nth-child(2):before {background-position: -130px 0;}.fb .fb_b {text-align: center;color: #999;}.fb .fb_b i {padding: 0 4px;}.fb .fb_b p a {color: #999;font-size: 14px;}.fb .fb_b p a:hover {color: #27ba9b;}.fb .fb_b p:nth-child(2) {margin-top: 5px;}/* 底部模块结束 */
1.3.3 首页样式（product-dev)样式
.xtx-wrapper {background: #f5f5f5;line-height: 1.4;}.xtx-wrapper .container {width: 1240px;margin: 0 auto;padding: 20px 0 40px;}.xtx-bread {padding: 10px 0 25px 25px;}.xtx-bread a {color: #999;padding-right: 5px;}.xtx-bread a:hover {color: #27BA9B;}.xtx-product-info {background: #fff;display: flex;min-height: 580px;}.xtx-product-info .left {width: 580px;padding: 30px 50px;}.xtx-product-info .left .pictrue {width: 480px;height: 400px;display: flex;position: relative;}.xtx-product-info .left .pictrue .middle {width: 400px;height: 400px;position: relative;}.xtx-product-info .left .pictrue .middle .layer {display: none;width: 200px;height: 200px;background-color: rgba(0, 0, 0, 0.3);position: absolute;left: 0;top: 0;cursor: move;}.xtx-product-info .left .pictrue .large {width: 400px;height: 400px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);position: absolute;left: 412px;top: 0;z-index: 999;background-color: #fff;display: none;background-image: url(../images/1.jpg);background-size: 800px 800px;}.xtx-product-info .left .pictrue .middle img {width: 100%;height: 100%;}.xtx-product-info .left .pictrue .small {width: 80px;height: 400px;}.xtx-product-info .left .pictrue .small ul li {width: 68px;height: 68px;margin-bottom: 15px;margin-left: 12px;border: 2px solid transparent;}.xtx-product-info .left .pictrue .small ul li img {width: 100%;height: 100%;}.xtx-product-info .left .pictrue .small ul li.active,.xtx-product-info .left .pictrue .small ul li:hover {border-color: #27BA9B;}.xtx-product-info .left .other {margin-top: 20px;}.xtx-product-info .left .other ul {display: flex;width: 400px;}.xtx-product-info .left .other ul li {flex: 1;text-align: center;position: relative;line-height: 32px;}.xtx-product-info .left .other ul li::before {content: "";position: absolute;top: 15px;right: 0;height: 70px;border-right: 1px solid #e4e4e4;}.xtx-product-info .left .other ul li:last-child::before {display: none;}.xtx-product-info .left .other ul li p:first-child {color: #999;}.xtx-product-info .left .other ul li p:nth-child(2) {color: #CF4444;}.xtx-product-info .right {width: 660px;padding-top: 30px;}.xtx-product-info .right h3 {font-size: 22px;font-weight: normal;}.xtx-product-info .right .desc {padding-top: 10px;color: #999;}.xtx-product-info .right .price {padding: 10px 0;}.xtx-product-info .right .price .now {color: #CF4444;margin-right: 5px;font-size: 22px;}.xtx-product-info .right .price .old {color: #999;text-decoration: line-through;font-size: 18px;}.xtx-product-info .right .address {width: 510px;background: #f9f9f9;padding: 0 10px 20px;}.xtx-product-info .right .address .fw {position: relative;padding: 0 15px 0 10px;}.xtx-product-info .right .address .fw::before {content: "";position: absolute;left: 0;top: 6px;width: 3px;height: 3px;border-radius: 50%;background: #27BA9B;}.xtx-product-info .right .address .lj {color: #27BA9B;}.xtx-product-info .right .address .box {width: 150px;height: 28px;border: 1px solid #e4e4e4;display: inline-block;line-height: 26px;text-align: center;margin-left: 10px;background: #fff;}.xtx-product-info .right .attrs {padding: 0 10px;}.xtx-product-info .right .attrs img {width: 50px;height: 50px;margin-right: 10px;border: 1px dashed transparent;cursor: pointer;}.xtx-product-info .right .attrs img.active,.xtx-product-info .right .attrs img:hover {border-color: #27BA9B;}.xtx-product-info .right .attrs .size {border: 1px solid #e4e4e4;padding: 5px 25px;display: inline-block;margin-right: 6px;cursor: pointer;}.xtx-product-info .right .attrs .size.active,.xtx-product-info .right .attrs .size:hover {border-color: #27BA9B;}.xtx-product-info .right .attrs .num {width: 116px;height: 28px;border: 1px solid #e4e4e4;display: flex;}.xtx-product-info .right .attrs .num input {border-left: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;width: 60px;line-height: 26px;text-align: center;color: #979797;}.xtx-product-info .right .attrs .num a {width: 28px;text-align: center;line-height: 26px;color: #979797;}.xtx-product-info .right .item {color: #999;display: flex;padding-top: 20px;align-items: center;}.xtx-product-info .right .item .dt {width: 50px;}.xtx-product-info .right .item .dd {flex: 1;color: #666;}.xtx-product-info .right .buy {width: 220px;height: 50px;background: #27BA9B;border-radius: 4px;display: block;color: #fff;font-size: 16px;text-align: center;line-height: 50px;}.xtx-relevant-product {background: #fff;margin: 20px 0;padding: 30px 28px;position: relative;}.xtx-relevant-product h3 {font-weight: normal;font-size: 20px;padding-bottom: 8px;padding-left: 25px;}.xtx-relevant-product .prev,.xtx-relevant-product .next {position: absolute;top: 200px;width: 40px;height: 40px;line-height: 40px;text-align: center;color: #dbdbdb;}.xtx-relevant-product .prev span,.xtx-relevant-product .next span {font-size: 30px;}.xtx-relevant-product .prev {left: 0;}.xtx-relevant-product .next {right: 0;}.xtx-relevant-product ul {display: flex;justify-content: space-between;}.xtx-relevant-product ul li {width: 278px;height: 360px;text-align: center;}.xtx-relevant-product ul li img {width: 190px;height: 190px;margin-top: 25px;}.xtx-relevant-product ul li .name {font-size: 16px;line-height: 40px;}.xtx-relevant-product ul li .desc {color: #999;line-height: 50px;}.xtx-relevant-product ul li .price {color: #CF4444;font-size: 18px;line-height: 50px;}.xtx-product-detail {display: flex;justify-content: space-between;}.xtx-product-detail .main {width: 942px;}.xtx-product-detail .main .cont {background: #fff;}.xtx-product-detail .main .cont .tab-head {height: 70px;line-height: 70px;border-bottom: 1px solid #f5f5f5;font-size: 18px;padding: 0 20px;position: relative;}.xtx-product-detail .main .cont .tab-head a {margin-right: 80px;}.xtx-product-detail .main .cont .tab-head a span {color: #CF4444;}.xtx-product-detail .main .cont .tab-head::before {content: "";position: absolute;height: 70px;width: 1px;background: #f5f5f5;top: 0;left: 135px;}.xtx-product-detail .main .cont .tab-pane .attrs {padding: 20px;display: flex;flex-wrap: wrap;}.xtx-product-detail .main .cont .tab-pane .attrs .item {width: 25%;display: flex;padding-bottom: 10px;}.xtx-product-detail .main .cont .tab-pane .attrs .item span:first-child {width: 75px;color: #999;}.xtx-product-detail .main .cont .tab-pane .attrs .item span:last-child {flex: 1;color: #666;}.xtx-product-detail .main .cont .tab-pane .detail {padding: 25px;text-align: center;}.xtx-product-detail .main .warn {margin-top: 20px;background: #fff;padding-bottom: 40px;}.xtx-product-detail .main .warn h3 {height: 80px;line-height: 80px;border-bottom: 1px solid #f5f5f5;padding-left: 50px;font-size: 18px;font-weight: normal;margin-bottom: 10px;}.xtx-product-detail .main .warn p {line-height: 40px;padding-left: 25px;color: #666;}.xtx-product-detail .main .warn p.tit {color: #333;}.xtx-product-detail .aside {width: 278px;}.xtx-product-detail .aside .tit {width: 278px;height: 70px;background: #E26237;color: #fff;font-size: 18px;line-height: 70px;padding-left: 25px;margin-bottom: 10px;}.xtx-product-detail .aside .product {margin-bottom: 10px;background: #fff;width: 278px;height: 360px;text-align: center;}.xtx-product-detail .aside .product img {width: 190px;height: 190px;margin-top: 25px;}.xtx-product-detail .aside .product .name {font-size: 16px;line-height: 40px;}.xtx-product-detail .aside .product .desc {color: #999;line-height: 50px;}.xtx-product-detail .aside .product .price {color: #CF4444;font-size: 18px;line-height: 50px;}.xtx-product-detail .aside .special {background: #fff;text-align: center;margin-bottom: 10px;}.xtx-product-detail .aside .special img {width: 278px;height: 212px;}.xtx-product-detail .aside .special .name {font-size: 18px;padding: 24px 0;}
2. javascript 源码示例
(function () {// 1、获取三个盒子// 1.1小盒子smallconst small = document.querySelector('.small')// 1.2获取中等盒子const middle = document.querySelector('.middle')// 1.3获取大盒子const large = document.querySelector('.large')// 2、小盒子利用事件委托的形式给里面的图片注册鼠标悬停事件//利用事件委托的形式子盒子必需要有冒泡行为，所以不用mouseentersmall.addEventListener('mouseover', function (e) {// 判断是不是悬停在图片上if (e.target.tagName === 'IMG') {// 移除所有类this.querySelector('.active').classList.remove('active')// 给图片的父级添加类e.target.parentNode.classList.add('active')// 中等盒子的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 timer = null// 封装移入show函数function show() {clearTimeout(timer)// 让大盒子显示出来large.style.display = 'block'}function hide() {timer = setTimeout(function () {large.style.display = 'none'}, 200)}// 4、给大盒子注册移入移除事件large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)// 5、移入中等盒子，黑色遮罩层出现// 获取layer遮罩层元素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) {// 算法// 用鼠标距离页面的位置减去盒子距离页面的位置得到鼠标在盒子内的位置// 如果父盒子有定位的话我们用offset就不合适了，所有我们使用getBoundingClientRectlet x = e.pageX - middle.getBoundingClientRect().left// 不过这个方法获取的是视口的位置，如果页面滚动了得到得结果就不一样了，所以我们还要减去滚动条得距离let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop// 判断盒子是否在中等盒子内移动let mx = 0, my = 0// 如果x小于100我们则不然遮罩层动if (x < 100) mx = 0// 如果在100和300之间，则让遮罩层动起来，但是需要让位置从0开始，鼠标就会出现在盒子中间if (x >= 100 && x < 300) mx = x - 100// 如果大于300则不能让盒子在动了，不然就超出中等盒子得范围了if (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'// 大盒子跟随中等盒子一起移动，由于大盒子的图片大小是中等盒子的两倍，所以*2large.style.backgroundPositionX = -2 * mx + 'px'large.style.backgroundPositionY = -2 * my + 'px'})})();
2.1效果示例：
需要源文件私信我免费领取
