主要对商城的主页的一些功能 进行了 编写 ,并通过jQuery 发送ajax 请求的到数据之后通过得到的数据对页面进行渲染工作。
商城主页的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/common.min.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../lib/bootstrap/fonts/glyphicons-halflings-regular.svg">
<link rel="stylesheet" href="../lib/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
</head>
<body>
<h1>TP-Link首页</h1>
<div class="layout-header-nav">
<div class="container">
<p class="header-benefit">
商城优惠大酬宾,全场满59元包邮
</p>
<div class="header-cart">
<a href="./cart.html" class="header-cart-link">
<div class="header-cart-button">
<div class="header-cart-button-img"></div>
<span class="header-cart-button-word">
购物车
</span>
</div>
</a>
</div>
<div class="header-nav">
<a href="./login.html" class="header-nav-item login">登录</a>
<span class="header-nav-item">|</span>
<a href="./register.html" class="header-nav-item">注册</a>
<span class="header-nav-item">|</span>
<a href="./cart.html" class="header-nav-item">我的订单</a>
<span class="header-nav-item">|</span>
<a href="#" class="header-nav-item">帮助中心</a>
<span class="header-nav-item">|</span>
<a href="#" class="header-nav-item">TP-LINK官网</a>
</div>>
</div>
</div>
<div class="layout-header-search">
<div class="container">
<a href="#">
<img src="" alt="" class="header-logo">
</a>
<div class="layout-banner-nav">
<div class="banner-nav-list">
<div class="container2">
</div>
</div>
</div>
<form action="" class="header-search">
<input type="text" class="header-search-input" autocomplete="off">
<input type="submit" class="header-search-submit" value="">
</form>
</div>
</div>
<div class="nav_box">
<ul class="container">
</ul>
</div>
<div class="banner container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/TL-XDR3020.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/TL-WDR7650kyizhan.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/IPC43AN2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/TL-WDR7660k2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/AP.jpg" style="height: 500px;" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="nav_list">
<ul>
<li>无线路由器 <p>></p></li>
<li>企业路由器 <p>></p></li>
<li>交换机 <p>></p></li>
<li>路由器 <p>></p></li>
<li>安防监控 <p>></p></li>
<li>电力线产品 <p>></p></li>
<li>无线扩展器 <p>></p></li>
<li>网卡 <p>></p></li>
<li>综合布线 <p>></p></li>
<li>其他产品 <p>></p></li>
</ul>
</div>
</div>
<div class="hot-products">
<div class="container">
<ul class="hot-products-list">
<li class="hot-products-list-item"><a href="">
<div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn/Content/themes/base/images/Home/hpTL-WDR7650kyizhan.jpg') center center no-repeat;">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</a></li>
<li class="hot-products-list-item"><a href="">
<div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn//Content/themes/base/images/Home/hpTL-WDR7661k.jpg') center center no-repeat;">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</a></li>
<li class="hot-products-list-item"><a href="">
<div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn/Content/themes/base/images/Home/hpTL-WDR8690.jpg') center center no-repeat;">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</a></li>
<li class="hot-products-list-item"><a href="">
<div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn/Content/themes/base/images/Home/hpTL-IPC43AN.jpg') center center no-repeat;">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</a></li>
</ul>
</div>
</div>
</body>
</html>
css:
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
.header-cart,.header-cart-link{height:40px;width:80px}
.header-cart-below-list-item-link,.header-cart-below-summary-link,.header-cart-below:hover,.header-cart-link{display:block}
.layout-header-nav{width:100%;min-width:1200px;height:40px;background-color:#333}
.layout-header-nav .header-benefit{font-size:12px;line-height:40px;color:#FFF;float:left}
.layout-header-nav .header-nav{float:right}
.layout-header-nav .header-nav-item{font-size:12px;line-height:40px;color:rgba(255,255,255,.7);padding:0 8px}
a.header-nav-item{font-size:12px;line-height:40px;color:#ccc;padding:0 8px}
a.header-nav-item:hover{color:#fff}
.header-cart{background-color:#4d4d4d;float:right;margin-left:8px;position:relative}
.header-cart-button{width:100%;height:100%}
.header-cart-button-img{background:url(http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/shopping_cart.png) center center no-repeat;background-size:100%;margin:12px 4px 12px 12px;float:left;width:16px;height:16px}
.header-cart-below,.header-cart-nothing{position:absolute;top:40px;right:0;z-index:99;width:276px}
.header-cart-button-word{font-size:12px;line-height:40px;color:#ccc;float:left}
.header-cart.active{background-color:#0096ff}
.header-cart.active .header-cart-button-img{background:url(http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/shopping_cart_hover.png) center center no-repeat;background-size:100%}
.header-cart.active .header-cart-button-word{color:#fff}
.layout-header-search{width:100%;min-width:1200px;height:80px;background-color:#FFF;border-bottom:1px solid #E6E6E6;box-shadow:0 0 10px 0 rgba(0,0,0,.04);box-sizing:border-box}
.layout-header-search .header-logo{width:237px;height:20px;margin:30px 0 0;float:left;background-image:url(http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/logo.png);background-size:100%}
.layout-header-search .header-search{position:relative;width:320px;height:40px;margin:20px 0 0;background-color:#FFF;float:right}
.layout-header-search .header-search-input{padding:10px 32px 10px 12px;width:276px;height:40px;border:1px solid #E6E6E6;font-size:14px;color:#333;line-height:20px}
.layout-header-search .header-search-input:focus{outline:0;caret-color:#0096FF;border:1px solid #0096FF}
.layout-header-search .header-search-submit{width:24px;height:24px;background-image:url(../images/search2.png);background-size:100% 100%;background-color:#FFF;border:none;cursor:pointer;position:absolute;top:10px;right:12px}
.layout-header-search .header-search-submit:hover{background-image:url(../images/search.png)}
.layout-header-search .header-search-keywords{position:absolute;top:0;left:0;padding:9px 12px}
.layout-header-search .header-search-keywords-item{font-size:12px;line-height:24px;color:#999;padding:4px;background-color:#F0F0F0}
.layout-header-search .header-search-keywords-item:hover{color:#0096FF}
.layout-banner-nav{width:600px;min-width:500px;background:#FFF;box-shadow:0 0 10px 0 rgba(0,0,0,.04);position: relative;}
.layout-banner-nav .banner-nav-list-item{font-size:14px;line-height:80px;color:#333;margin:0 24px 0 0;display:block;float:left}
.layout-banner-nav .banner-nav-list-item:first-of-type{margin-left:44px}
.layout-banner-nav .banner-nav-list-item:hover{color:#0096FF}
.container2{width:900px;background-color: salmon;}
.nav_box{
width: 100%;
background-color: white;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
display: none;
position: absolute;
z-index: 9999;
}
.nav_box >ul{display: flex;}
.nav_box >ul >li{
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.nav_box >ul >li >div{
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #333;
margin-bottom: 15px;
padding-right: 40px;
}
.nav_box >ul >li >div img{
width: 150px;
height: 150px;
display: block;
}
.nav_box >ul >li >p{
margin-bottom: 5px;
}
.model{
font-size: 10px;
}
.price{
color: coral;
}
.banner{
position: relative;
}
.banner .prev{
left: 215px;
}
.banner >.nav_list{
width: 200px;
height: 100%;
position: absolute;
left: 15px;
top: 0;
background-color: rgba(0, 0, 0, .4);
z-index: 999;
}
.banner > .nav_list >ul{
width: 100%;
height: 100%;
}
.banner > .nav_list >ul >li{
color: white;
height: 50px;
line-height: 50px;
font-size: 14px;
text-indent: 20px;
}
.banner > .nav_list >ul >li:hover{
background-color: #0096FF;
}
.banner >.nav_list >ul >li >p{
float:right;
margin-right: 15px;
}
.hot-products-list-item-inner{
width: 280px;
height: 260px;
}
.hot-products-list {
margin-top: 30px;
margin-bottom: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
/* align-items: center; */
}
js代码:
<script>
console.log($.cookie('name'));
console.log($('.login'));
$(function() {
if ($.cookie('name')) {
console.log('用户登录')
$('.login').text($.cookie('name'));
}else{
console.log('用户未登录')
}
})
$('.header-cart').hover(function(){
$('.header-cart').addClass("active")
},function (){
$('.header-cart').removeClass("active")
}
)
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: {
delay: 1000
},
effect: 'fade',
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
getList()
function getList() {
$.ajax({
url: '../lib/nav_top.json',
dataType: 'json',
success: function (res) {
console.log(res)
// 4-1. 准备一个空字符串
let str = ''
// 4-2. 渲染一级的 a
res.forEach(item => {
str += `<a class="banner-nav-list-item">${ item.name }</a>`
})
// 4-3. 填充到 nav_top 里面的 ul 里面
$('.container2 ')
.html(str)
.on({
mouseenter: () => $('.nav_box').stop().slideDown(),
mouseleave: () => $('.nav_box').stop().slideUp()
})
.children('a') // 找到所有的一级菜单下的 a
.on('mouseover', function () {
// 5-1. 知道自己移入的时哪一个 a
const index = $(this).index()
// 5-2. 找到要渲染的数组
const list = res[index].list
// 5-3. 用我们找到的数组把 nav_box 位置渲染了就可以了
let str = ''
// 5-4. 进行组装
list.forEach(item => {
str += `
<li>
<div>
<img src="${ item.list_url }" alt="">
</div>
<p class="title">${ item.list_name }</p>
<p class="model">${item.list_model}</p>
<span class="price">¥${ item.list_price }</span>
</li>
`
})
// 5-5. 填充到页面里面
$('.nav_box > ul').html(str)
})
// 4-4. 给 nav_box 添加一个移入移出事件
$('.nav_box')
.on({
mouseover: function () { $(this).finish().show() },
mouseout: function () { $(this).finish().slideUp() }
})
}
})
}
</script>
json数据
[
{
"id": 1,
"name": "家用产品",
"list": [
{
"list_id": 101,
"list_name": "TL-WDR7660千兆版",
"list_model":"AC1900双频无线路由器",
"list_price": 199,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/815.png"
},
{
"list_id": 102,
"list_name": "TL-WDR5620",
"list_model":"AC1200双频无线路由器",
"list_price": 119,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/527.png"
},
{
"list_id": 103,
"list_name": "飞月•TL-WDR5670青瓷色",
"list_model":"AC1200双频无线路由器",
"list_price": 125,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/757.png"
},
{
"list_id": 104,
"list_name": "仲夏夜之梦•TL-WDR5660千兆版",
"list_model":"AC1200双频千兆无线路由器",
"list_price": 179,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/732.png"
},
{
"list_id": 105,
"list_name": "TL-WDR8630",
"list_model":"AC2600双频板阵天线千兆无线路由器",
"list_price": 529,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/606.png"
}
]
},
{
"id": 2,
"name": "商用产品",
"list": [
{
"list_id": 201,
"list_name": "TL-SG1210P",
"list_model":"8口全千兆以太网PoE交换机",
"list_price": 420,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/347.png"
},
{
"list_id": 202,
"list_name": "TL-ER3220G",
"list_model":"双核多WAN口千兆企业VPN路由器",
"list_price": 879,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/619.png"
},
{
"list_id": 203,
"list_name": "TL-R473GP-AC",
"list_model":"PoE•AC一体化千兆VPN路由器",
"list_price": 499,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/560.png"
},
{
"list_id": 204,
"list_name": "TL-HDAP1800C-PoE/DC",
"list_model":"AC1800四频高密度无线吸顶式AP",
"list_price": 799,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/742.png"
},
{
"list_id": 205,
"list_name": "TL-AP1202GI-PoE 薄款",
"list_model":"AC1200双频千兆无线面板式AP",
"list_price": 329,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/763.png"
}
]
},
{
"id": 3,
"name": "阵列天线路由器",
"list": [
{
"list_id": 301,
"list_name": "TL-WTR9500",
"list_model":"AC5400三频方阵千兆无线路由器",
"list_price": 2599,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/576.png"
},
{
"list_id": 302,
"list_name": "TL-WDR8630",
"list_model":"AC2600双频板阵千兆无线路由器",
"list_price": 529,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/606.png"
},
{
"list_id": 303,
"list_name": "绿野仙踪•TL-WDR8640",
"list_model":"AC2600双频板阵千兆无线路由器",
"list_price": 459,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/672.png"
},
{
"list_id": 304,
"list_name": "飞檐•TL-WDR5640",
"list_model":"AC1200双频方阵无线路由器",
"list_price": 129,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/655.png"
},
{
"list_id": 305,
"list_name": "X12套装",
"list_model":"全家通•智享路由",
"list_price": 349,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/712.png"
}
]
},
{
"id": 4,
"name": "WVR/WAR系列",
"list": [
{
"list_id": 401,
"list_name": "TL-WVR2600L",
"list_model":"企业级AC2600双频无线VPN路由器",
"list_price": 1499,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/525.png"
},
{
"list_id": 402,
"list_name": "TL-WVR1300L",
"list_model":"企业级AC1300双频无线VPN路由器",
"list_price": 759,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/443.png"
},
{
"list_id": 403,
"list_name": "TL-WVR1200L",
"list_model":"企业级AC1200双频无线VPN路由器",
"list_price": 599,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/528.png"
},
{
"list_id": 404,
"list_name": "TL-WAR1208L",
"list_model":"企业级AC4300三频无线VPN路由器",
"list_price": 599,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/673.png"
},
{
"list_id": 405,
"list_name": "TL-WVR450G",
"list_model":"450M无线企业VPN路由器",
"list_price": 519,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/177.png"
}
]
},
{
"id": 5,
"name": "无线网络摄像机",
"list": [
{
"list_id": 501,
"list_name": "TL-IPC42A-4",
"list_model":"200万云台无线网络摄像机",
"list_price": 199,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/682.png"
},
{
"list_id": 502,
"list_name": "TL-IPC42C-4",
"list_model":"200万云台无线网络摄像机",
"list_price": 189,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/717.png"
},
{
"list_id": 503,
"list_name": "TL-IPC53A",
"list_model":"全景无线网络摄像机",
"list_price": 299,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/705.png"
}
]
}
]