【项目】小帽商城“纯前端原生“（二）

news/2025/2/12 8:53:27/

小帽商城

第五章 路径导航布局

<!-- index.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="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 最外层的包裹元素 --><div id="wrapper"><!-- 头部开始 --><header id="header">...</header><!-- 头部结束 --><!-- 分类导航开始 --><div id="navWrap">...</div><!-- 分类导航结束 --><!-- 内容区域开始 --><div id="content"><!-- 版心元素 --><div class="contentMain"><!-- 路径导航 --><div id="navPath"><a href="javascript:;">手机、数码、通讯</a><i>/</i><a href="javascript:;">手机</a><i>/</i><a href="javascript:;">Apple苹果</a><i>/</i><a>iphone 13系</a></div></div></div><!-- 内容区域结束 --></div>
</body>
</html>

@import 'mixins/clear.less';
// 最外层的包裹元素
#wrapper{// 头部开始#header{...}// 头部结束// 分类导航开始#navWrap{...}// 分类导航结束// 内容区域开始#content{// 版心元素.contentMain{width: 1200px;margin: 15px auto 0 auto;font-size: 0px;// 路径导航#navPath{padding: 9px 15px 9px 0;a{// 行标签和行标签之间会有小缝隙// 处理方式就是给它们的直接父元素上面添加一个font-size为0// 还得添加一下它们原本的字体大小font-size: 12px;}i{padding: 0 5px;font-size: 12px;}}}}// 内容区域结束
}

第六章 路径导航数据动态渲染

<!-- index.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="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 最外层的包裹元素 --><div id="wrapper"><!-- 头部开始 --><header id="header">...</header><!-- 头部结束 --><!-- 分类导航开始 --><div id="navWrap">...</div><!-- 分类导航结束 --><!-- 内容区域开始 --><div id="content"><!-- 版心元素 --><div class="contentMain"><!-- 路径导航 --><div id="navPath"></div></div></div><!-- 内容区域结束 --><script src="js/data.js"></script><script src="js/index.js"></script></div>
</body>
</html>

// js\data.js
var goodData = {path: [{title: "手机、数码、通讯",url: "###"}, {title: "手机",url: "###"}, {title: "Apple苹果",url: "###"}, {title: "iphone 13系",}],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},]}]}
}

// js\index.js
// 作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function(){/*** 思路：* 1.先获取路径导航的页面元素（navPath）* 2.再来获取所需要的数据（data.js -> goodData.path）* 3.由于数据是需要动态产生的，那么相应的DOM元素也应该是动态产生的，含义需要创建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);}}
}

第七章 左侧放大镜布局搭建

<!-- index.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="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 最外层的包裹元素 --><div id="wrapper"><!-- 头部开始 --><header id="header">...</header><!-- 头部结束 --><!-- 分类导航开始 --><div id="navWrap">...</div><!-- 分类导航结束 --><!-- 内容区域开始 --><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 class="mask"></div></div><!-- 大图框 --><div id="bigPic"><!-- 大图片 --><img src="images/b1.png" alt=""></div></div></div><!-- 左侧放大镜结束 --><!-- 右侧商品详情区域开始 --><!-- 右侧商品详情区域结束 --></div><!-- 中间区域结束 --></div></div><!-- 内容区域结束 --><script src="js/data.js"></script><script src="js/index.js"></script></div>
</body>
</html>

@import 'mixins/clear.less';
// 最外层的包裹元素
#wrapper{// 头部开始#header{...}// 头部结束// 分类导航开始#navWrap{...}// 分类导航结束// 内容区域开始#content{// 版心元素.contentMain{width: 1200px;margin: 15px auto 0 auto;font-size: 0px;// 路径导航开始#navPath{...}// 路径导航结束// 中间区域开始#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;}}}}}}}// 内容区域结束
}

第八章 放大镜鼠标移入移出效果

<!-- index.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="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 最外层的包裹元素 --><div id="wrapper"><!-- 头部开始 --><header id="header">...</header><!-- 头部结束 --><!-- 分类导航开始 --><div id="navWrap">...</div><!-- 分类导航结束 --><!-- 内容区域开始 --><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><!-- 内容区域结束 --><script src="js/data.js"></script><script src="js/index.js"></script></div>
</body>
</html>

// 作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function(){// 路径导航的数据渲染navPathDataBind();function navPathDataBind() {/*** 思路：* 1.先获取路径导航的页面元素（navPath）* 2.再来获取所需要的数据（data.js -> goodData.path）* 3.由于数据是需要动态产生的，那么相应的DOM元素也应该是动态产生的，含义需要创建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.onmouseleave = function() {// 让小图框移除蒙版元素smallPic.removeChild(maskDiv);// 让LeftTop元素移除大图框leftTop.removeChild(BigPic);}}}
}

在这里插入图片描述


http://www.ppmy.cn/news/807655.html

相关文章

实现放大镜的效果

实现放大镜的效果

<!--内容区域开始--><div id"content"><!--版心元素--><div class"contentMain"><!--路径导航开始--><div id"navPath"></div><!--路径导航结束--><!--中间区域开始--><div id"c…
阅读更多...
netty学习（4）:通过SpringBoot Web发送消息实现netty实现多个客户端与服务器通信

netty学习（4）:通过SpringBoot Web发送消息实现netty实现多个客户端与服务器通信

1. 基于netty学习&#xff08;3&#xff09;:SpringBoot整合netty实现多个客户端与服务器通信的学习&#xff0c;要想通过http在netty客户端之间发送消息&#xff0c;需要实现spring-boot-starter-web&#xff0c;封装消息格式&#xff0c;自动调用netty客户端 2. 封装一个简单…
阅读更多...
网页基本布局流程（上半部分）

网页基本布局流程（上半部分）

样式配置 1、给CSS文件夹中添加reset.css样式表来初始化样式 2、一般写CSS代码用less来写会方便很多&#xff0c;可以在扩展文件中下载easy less扩展使用 &#xff08;使用方法&#xff1a;在写好的less文件上ctrls即可生成对应的css文件&#xff09; 3、在html文件中导入r…
阅读更多...
韶关的商户想知道ios9.3.4

韶关的商户想知道ios9.3.4

本篇文章由 泉州SEO www.234yp.com 整理发布&#xff0c;转载请注明原文地址 www.234yp.com/Article/150482.html 谢谢合作&#xff01; 韶关的商户想知道ios9.3.4 厦门SEO讯 8月5日消息&#xff0c;苹果在今天凌晨意外推送了iOS9.3.4的正式版&#xff0c;本次iOS9.3.4正式版并…
阅读更多...
移动端H5各种各样的列表的制作方法(六) by FungLeo

移动端H5各种各样的列表的制作方法(六) by FungLeo

移动端H5各种各样的列表的制作方法(六) by FungLeo 前情回顾 前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 《移动端H5各种各样的列表的制作方法(四)》 《移动端H5…
阅读更多...
QT开发技能的就业前景如何？

QT开发技能的就业前景如何？

QT是一种广泛使用的跨平台应用程序开发框架&#xff0c;具有良好的市场认可度和应用领域。因此&#xff0c;具备QT开发技能的人通常有机会找到相关的工作。 然而&#xff0c;就业市场的竞争因地区、行业和个人背景而异。以下几个因素可能会影响您在找工作时的情况&#xff1a; …
阅读更多...
Elasticsearch】文档操作

Elasticsearch】文档操作

目录 3.文档操作 3.1.新增文档 3.2.查询文档 3.3.删除文档 3.4.修改文档 3.4.1.全量修改 3.4.2.增量修改 3.5.总结 3.文档操作 3.1.新增文档 语法&#xff1a; POST /索引库名/_doc/文档id {"字段1": "值1","字段2": "值2"…
阅读更多...
微信头像批量下载

微信头像批量下载

微信素材api请求返回的media_id&#xff0c;如果需要下载或直接在网页使用可以通过https://file.api.weixin.qq.com/cgi-bin/media/get?access_tokenaccess_token&media_idmedia_id来访问微信头像资源。
阅读更多...
最新文章

Copyright @ 2022~2023