Jquery--02--案例
2024-04-29 18:07:37
目录
1.购物车案例
一、商品全选
二、商品增减数量
三、修改商品小计
四、计算总计和总额
五、删除商品模块
六、选中商品添加背景
2. 品优购电梯导航
1.购物车案例
index.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>我的购物车-品优购</title><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /><!-- 引入facicon.ico网页图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><!-- 引入css 初始化的css 文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式的css 文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入car css --><link rel="stylesheet" href="css/car.css"><!-- 先引入jquery --><script src="js/jquery.min.js"></script><!-- 在引入我们自己的js文件 --><script src="js/car.js"></script>
</head><body><!-- 顶部快捷导航start --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a><a href="#" class="style-red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li class="spacer"></li><li><a href="#">我的品优购</a><i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">品优购会员</a></li><li class="spacer"></li><li><a href="#">企业采购</a></li><li class="spacer"></li><li><a href="#">关注品优购</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">客户服务</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">网站导航</a> <i class="icomoon"></i></li></ul></div></div></div><!-- 顶部快捷导航end --><div class="car-header"><div class="w"><div class="car-logo"><img src="img/logo.png" alt=""> <b>购物车</b></div></div></div></div><div class="c-container"><div class="w"><div class="cart-filter-bar"><em>全部商品</em></div><!-- 购物车主要核心区域 --><div class="cart-warp"><!-- 头部全选模块 --><div class="cart-thead"><div class="t-checkbox"><input type="checkbox" name="" id="" class="checkall"> 全选</div><div class="t-goods">商品</div><div class="t-price">单价</div><div class="t-num">数量</div><div class="t-sum">小计</div><div class="t-action">操作</div></div><!-- 商品详细模块 --><div class="cart-item-list"><div class="cart-item check-cart-item"><div class="p-checkbox"><input type="checkbox" name="" id="" checked class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p1.jpg" alt=""></div><div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div></div><div class="p-price">￥12.60</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥12.60</div><div class="p-action"><a href="javascript:;">删除</a></div></div><div class="cart-item"><div class="p-checkbox"><input type="checkbox" name="" id="" class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p2.jpg" alt=""></div><div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div></div><div class="p-price">￥24.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥24.80</div><div class="p-action"><a href="javascript:;">删除</a></div></div><div class="cart-item"><div class="p-checkbox"><input type="checkbox" name="" id="" class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p3.jpg" alt=""></div><div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div></div><div class="p-price">￥29.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥29.80</div><div class="p-action"><a href="javascript:;">删除</a></div></div></div><!-- 结算模块 --><div class="cart-floatbar"><div class="select-all"><input type="checkbox" name="" id="" class="checkall">全选</div><div class="operation"><a href="javascript:;" class="remove-batch"> 删除选中的商品</a><a href="javascript:;" class="clear-all">清理购物车</a></div><div class="toolbar-right"><div class="amount-sum">已经选<em>1</em>件商品</div><div class="price-sum">总价： <em>￥12.60</em></div><div class="btn-area">去结算</div></div></div></div></div></div><!-- footer start --><div class="footer"><div class="w"><!-- mod_service --><div class="mod_service"><ul><li><i class="mod-service-icon mod_service_zheng"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_kuai"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li></ul></div><!-- mod_help --><div class="mod_help"><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item mod_help_app"><dt>帮助中心</dt><dd><img src="upload/erweima.png" alt=""><p>品优购客户端</p></dd></dl></div><!-- mod_copyright --><div class="mod_copyright"><p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- footer end -->
</body></html>car.css
.car-header {padding: 20px 0;
}.car-logo img {vertical-align: middle;
}.car-logo b {font-size: 20px;margin-top: 20px;margin-left: 10px;
}.cart-filter-bar {font-size: 16px;color: #E2231A;font-weight: 700;
}.cart-filter-bar em {padding: 5px;border-bottom: 1px solid #E2231A;
}.cart-thead {height: 32px;line-height: 32px;margin: 5px 0 10px;padding: 5px 0;background: #f3f3f3;border: 1px solid #e9e9e9;border-top: 0;position: relative;
}.cart-thead>div,
.cart-item>div {float: left;
}.t-checkbox,
.p-checkbox {height: 18px;line-height: 18px;padding-top: 7px;width: 122px;padding-left: 11px;
}.t-goods {width: 400px;
}.t-price {width: 120px;padding-right: 40px;text-align: right;
}.t-num {width: 150px;text-align: center;
}.t-sum {width: 100px;text-align: right;
}.t-action {width: 130px;text-align: right;
}.cart-item {height: 160px;border-style: solid;border-width: 2px 1px 1px;border-color: #aaa #f1f1f1 #f1f1f1;background: #fff;padding-top: 14px;margin: 15px 0;
}.check-cart-item {background: #fff4e8;
}.p-checkbox {width: 50px;
}.p-goods {margin-top: 8px;width: 565px;
}.p-img {float: left;border: 1px solid #ccc;padding: 5px;
}.p-msg {float: left;width: 210px;margin: 0 10px;
}.p-price {width: 110px;
}.quantity-form {width: 80px;height: 22px;
}.p-num {width: 170px;
}.decrement,
.increment {float: left;border: 1px solid #cacbcb;height: 18px;line-height: 18px;padding: 1px 0;width: 16px;text-align: center;color: #666;margin: 0;background: #fff;margin-left: -1px;
}.itxt {float: left;border: 1px solid #cacbcb;width: 42px;height: 18px;line-height: 18px;text-align: center;padding: 1px;margin: 0;margin-left: -1px;font-size: 12px;font-family: verdana;color: #333;-webkit-appearance: none;
}.p-sum {font-weight: 700;width: 145px;
}/* 结算模块 */.cart-floatbar {height: 50px;border: 1px solid #f0f0f0;background: #fff;position: relative;margin-bottom: 50px;line-height: 50px;
}.select-all {float: left;height: 18px;line-height: 18px;padding: 16px 0 16px 9px;white-space: nowrap;
}.select-all input {vertical-align: middle;display: inline-block;margin-right: 5px;
}.operation {float: left;width: 200px;margin-left: 40px;
}.clear-all {font-weight: 700;margin: 0 20px;
}.toolbar-right {float: right;
}.amount-sum {float: left;
}.amount-sum em {font-weight: 700;color: #E2231A;padding: 0 3px;
}.price-sum {float: left;margin: 0 15px;
}.price-sum em {font-size: 16px;color: #E2231A;font-weight: 700;
}.btn-area {font-weight: 700;width: 94px;height: 52px;line-height: 52px;color: #fff;text-align: center;font-size: 18px;font-family: "Microsoft YaHei";background: #e54346;overflow: hidden;
}一、商品全选
1.全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
2.因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
3.把全选按钮状态赋值给3小复选框就可以了。
4.当我们每次点击小的复选框按钮，就来判断：
5.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
6.:checked 选择器 :checked 查找被选中的表单元素。
二、商品增减数量
1.核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
2.注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。
3.修改表单的值是val() 方法
4.注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
5.减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
三、修改商品小计
1.核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
2.注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）
3.修改普通元素的内容是text() 方法
4.注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
5.parents(‘选择器’) 可以返回指定祖先元素
6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
7.用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计
四、计算总计和总额
1.把所有文本框中的值相加就是总额数量，总计同理。
2.文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。
五、删除商品模块
1.核心思路：把商品remove() 删除元素即可
2.有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品
3. 清理购物车 3.商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发
4.删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
5.清理购物车： 则是把所有的商品全部删掉
六、选中商品添加背景
1.核心思路：选中的商品添加背景，不选中移除背景即可
2.全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
3.小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景
4.这个背景，可以通过类名修改，添加类和删除类
car.js
$(function() {// 1. 全选 全不选功能模块// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了// 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。// 事件可以使用change$(".checkall").change(function() {// console.log($(this).prop("checked"));$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));if ($(this).prop("checked")) {// 让所有的商品添加 check-cart-item 类名$(".cart-item").addClass("check-cart-item");} else {// check-cart-item 移除$(".cart-item").removeClass("check-cart-item");}});// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。$(".j-checkbox").change(function() {// if(被选中的小的复选框的个数 === 3) {// 就要选中全选按钮// } else {// 不要选中全选按钮// }// console.log($(".j-checkbox:checked").length);// $(".j-checkbox").length 这个是所有的小复选框的个数// :checked 选择器 :checked 查找被选中的表单元素。if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {$(".checkall").prop("checked", true);} else {$(".checkall").prop("checked", false);}if ($(this).prop("checked")) {// 让当前的商品添加 check-cart-item 类名$(this).parents(".cart-item").addClass("check-cart-item");} else {// check-cart-item 移除$(this).parents(".cart-item").removeClass("check-cart-item");}});// 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。$(".increment").click(function() {// 得到当前兄弟文本框的值//只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。//修改表单的值是val() 方法var n = $(this).siblings(".itxt").val();n++;$(this).siblings(".itxt").val(n);// 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计// 当前商品的价格 p var p = $(this).parents(".p-num").siblings(".p-price").html();// console.log(p);//当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)p = p.substr(1);console.log(p);var price = (p * n).toFixed(2);// 小计模块 // toFixed(2) 可以让我们保留2位小数//parents(‘选择器’) 可以返回指定祖先元素 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);getSum();});$(".decrement").click(function() {// 得到当前兄弟文本框的值var n = $(this).siblings(".itxt").val();if (n == 1) {return false;}// console.log(n);n--;$(this).siblings(".itxt").val(n);// var p = $(this).parent().parent().siblings(".p-price").html();// parents(".p-num") 返回指定的祖先元素var p = $(this).parents(".p-num").siblings(".p-price").html();// console.log(p);p = p.substr(1);console.log(p);// 小计模块 $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));getSum();});// 4. 用户修改文本框的值 计算 小计模块 $(".itxt").change(function() {// 先得到文本框的里面的值 乘以 当前商品的单价 var n = $(this).val();// 当前商品的单价var p = $(this).parents(".p-num").siblings(".p-price").html();// console.log(p);p = p.substr(1);$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));getSum();});// 5. 计算总计和总额模块,文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。getSum();function getSum() {var count = 0; // 计算总件数 var money = 0; // 计算总价钱$(".itxt").each(function(i, ele) {count += parseInt($(ele).val());});$(".amount-sum em").text(count);$(".p-sum").each(function(i, ele) {money += parseFloat($(ele).text().substr(1));});$(".price-sum em").text("￥" + money.toFixed(2));}// 6. 删除商品模块// (1) 商品后面的删除按钮$(".p-action a").click(function() {// 删除的是当前的商品 ,所以从 $(this) 出发$(this).parents(".cart-item").remove();getSum();});// (2) 删除选中的商品$(".remove-batch").click(function() {// 删除的是小的复选框选中的商品, 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品$(".j-checkbox:checked").parents(".cart-item").remove();getSum();});// (3) 清空购物车 删除全部商品$(".clear-all").click(function() {$(".cart-item").remove();getSum();})
})
2. 品优购电梯导航
上、
1.当我们滚动到 今日推荐 模块，就让电梯导航显示出来
2.点击电梯导航页面可以滚动到相应内容区域
3.核心算法：因为电梯导航模块和内容区模块一一对应的
4.当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
5.就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
6.然后执行动画即可
下、
1.当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名
2.当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
3.触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
4.需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
5.判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
6.就利用这个索引号找到相应的电梯导航小li添加类。
index.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /><!-- 引入facicon.ico网页图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><!-- 引入css 初始化的css 文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式的css 文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入 首页的css文件 --><link rel="stylesheet" href="css/index.css"><script src="js/jquery.min.js"></script><script src="js/index.js"></script>
</head><body><!-- 顶部快捷导航start --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a><a href="#" class="style-red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li class="spacer"></li><li><a href="#">我的品优购</a><i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">品优购会员</a></li><li class="spacer"></li><li><a href="#">企业采购</a></li><li class="spacer"></li><li><a href="#">关注品优购</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">客户服务</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">网站导航</a> <i class="icomoon"></i></li></ul></div></div></div><!-- 顶部快捷导航end --><!-- header制作 --><div class="header w"><!-- logo --><div class="logo"><h1><a href="index.html" title="品优购">品优购</a></h1></div><!-- search --><div class="search"><input type="text" class="text" value="请搜索内容..."><button class="btn">搜索</button></div><!-- hotwrods --><div class="hotwrods"><a href="#" class="style-red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><div class="shopcar"><i class="car"> </i>我的购物车 <i class="arrow"> </i><i class="count">80</i></div></div><!-- header 结束 --><!-- nav start --><div class="nav"><div class="w"><div class="dropdown fl"><div class="dt"> 全部商品分类 </div><div class="dd"><ul><li class="menu_item"><a href="#">家用电器</a> <i> </i> </li><li class="menu_item"><a href="list.html">手机</a> 、<a href="#">数码</a> 、<a href="#">通信</a><i> </i></li><li class="menu_item"><a href="#">电脑、办公</a> <i> </i> </li><li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i> </i> </li><li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i> </i> </li><li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i> </i> </li><li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i> </i> </li><li class="menu_item"><a href="#">运动户外、钟表</a> <i> </i> </li><li class="menu_item"><a href="#">汽车、汽车用品</a> <i> </i> </li><li class="menu_item"><a href="#">母婴、玩具乐器</a> <i> </i> </li><li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i> </i> </li><li class="menu_item"><a href="#">医药保健</a> <i> </i> </li><li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li><li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li><li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i> </i> </li></ul></div></div><!-- 右侧导航 --><div class="navitems fl"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">传智超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">有趣</a></li></ul></div></div></div><!-- nav end --><!-- main 模块 --><div class="w"><div class="main"><div class="focus fl"><!-- 左侧按钮 --><a href="javascript:;" class="arrow-l"><</a><!-- 右侧按钮 --><a href="javascript:;" class="arrow-r"> </a><!-- 核心的滚动区域 --><ul><li><a href="#"><img src="upload/focus.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li></ul><!-- 小圆圈 --><ol class="circle"></ol></div><div class="newsflash fr"><div class="news"><div class="news-hd">品优购快报<a href="#">更多</a></div><div class="news-bd"><ul><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】9.9元洗100张照片！</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div></div><div class="lifeservice"><ul><li><a href="#"><i class="service_ico service_ico_huafei"></i><p>话费</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a><span class="hot"></span></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li></ul></div><div class="bargain"><img src="upload/bargain.jpg" alt=""></div></div></div></div><!-- 推荐服务模块 start --><div class="recommend w"><div class="recom-hd fl"><img src="img/clock.png" alt=""><h3>今日推荐</h3></div><div class="recom-bd fl"><ul><li><a href="#"><img src="upload/pic.jpg" alt=""></a></li><li><a href="#"><img src="upload/pic.jpg" alt=""></a></li><li><a href="#"><img src="upload/pic.jpg" alt=""></a></li><li class="last"><a href="#"><img src="upload/pic.jpg" alt=""></a></li></ul></div></div><!-- 推荐服务模块 end --><!-- 楼层区 start --><div class="floor"><div class="jiadian w"><div class="box-hd"><h3>家用电器</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="shouji w"><div class="box-hd"><h3>手机通讯</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="diannao w"><div class="box-hd"><h3>电脑办公</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="jiaju w"><div class="box-hd"><h3>精品家具</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div></div><!-- 楼层区 end --><!-- 固定电梯导航 --><div class="fixedtool"><ul><li class="current">家用电器</li><li>手机通讯</li><li>电脑办公</li><li>精品家具</li></ul></div><!-- footer start --><div class="footer"><div class="w"><!-- mod_service --><div class="mod_service"><ul><li><i class="mod-service-icon mod_service_zheng"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_kuai"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li></ul></div><!-- mod_help --><div class="mod_help"><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item mod_help_app"><dt>帮助中心</dt><dd><img src="upload/erweima.png" alt=""><p>品优购客户端</p></dd></dl></div><!-- mod_copyright --><div class="mod_copyright"><p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- footer end -->
</body></html>index.css
/*这个文件里面放的是 首页的样式*/.main {width: 980px;height: 455px;margin-left: 219px;margin-top: 10px;
}.focus {position: relative;width: 721px;height: 455px;background-color: purple;overflow: hidden;
}.focus ul {position: absolute;top: 0;left: 0;width: 600%;
}.focus ul li {float: left;
}.arrow-l,
.arrow-r {display: none;position: absolute;top: 50%;margin-top: -20px;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-family: 'icomoon';font-size: 18px;z-index: 2;
}.arrow-r {right: 0;
}.circle {position: absolute;bottom: 10px;left: 50px;
}.circle li {float: left;width: 8px;height: 8px;/*background-color: #fff;*/border: 2px solid rgba(255, 255, 255, 0.5);margin: 0 3px;border-radius: 50%;/*鼠标经过显示小手*/cursor: pointer;
}.current {background-color: #fff;
}.newsflash {width: 250px;height: 455px;
}.news {height: 163px;border: 1px solid #ccc;
}.news-hd {height: 32px;/*dotted 点线 dashed 虚线*/border-bottom: 1px dotted #ccc;padding: 0 15px;font-size: 14px;line-height: 32px;
}.news-hd a {float: right;font-size: 12px;font-family: 'icomoon';
}.news-bd {padding: 10px 0 0 15px;
}.news-bd li {height: 23px;
}.lifeservice {overflow: hidden;height: 208px;border: 1px solid #ccc;border-top: none;
}.lifeservice ul {width: 252px;
}.lifeservice li {position: relative;float: left;width: 62px;height: 70px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;
}.lifeservice li a {display: block;/* overflow: hidden; 解决i 引起的 外边距塌陷合并的问题*/overflow: hidden;height: 100%;
}.lifeservice li p {text-align: center;
}.hot {position: absolute;right: 0;top: 0;width: 12px;height: 15px;background: url(../img/jian.jpg) no-repeat;
}.service_ico {display: block;width: 24px;height: 24px;background: url(../img/icons.png) no-repeat;margin: 10px auto;
}.service_ico_huafei {background-position: -17px -16px;
}.service_ico_feiji {width: 26px;background-position: -78px -16px;
}.bargain {height: 75px;margin-top: 5px;
}/*推荐模块*/.recommend {height: 163px;margin-top: 10px;
}.recom-hd {width: 200px;height: 163px;background-color: #5c5251;text-align: center;
}.recom-hd img {margin: 30px 0 10px 0;
}.recom-hd h3 {font-size: 18px;color: #fff;font-weight: normal;
}.recom-bd {width: 1000px;height: 163px;background-color: #ebebeb;
}.recom-bd li {float: left;width: 249px;height: 145px;border-right: 1px solid #ccc;margin-top: 10px;
}.recom-bd .last {border-right: 0;
}/*floor 楼层区*/.box-hd {height: 30px;border-bottom: 2px solid #c81623;margin-top: 25px;
}.box-hd h3 {float: left;font-size: 18px;color: #c81623;
}.tab-list {float: right;line-height: 30px;
}.tab-list li {float: left;
}.tab-list li a {margin: 0 15px;
}.box-bd {height: 360px;
}.w209 {width: 209px;background-color: #f9f9f9;
}.w329 {width: 329px;
}.w219 {width: 219px;border-right: 1px solid #ccc;
}.w220 {width: 220px;border-right: 1px solid #ccc;
}.tab-con li {float: left;height: 360px;
}.tab-con-item {border-bottom: 1px solid #ccc;
}.tab-con-list {overflow: hidden;margin-bottom: 15px;
}.tab-con-list li {width: 86px;height: 32px;line-height: 32px;border-bottom: 1px solid #ccc;margin-left: 10px;text-align: center;
}.box-bd li {overflow: hidden;
}.box-bd img {/*过渡写到本身上， 谁做动画，给谁加*/transition: all .2s;
}/*我们鼠标经过图片 往右走 8px*/.box-bd img:hover {margin-left: 8px;
}/*电梯导航*/.fixedtool {position: fixed;top: 100px;left: 50%;margin-left: -676px;width: 66px;background-color: #fff;display: none;
}.fixedtool li {height: 32px;line-height: 32px;text-align: center;font-size: 12px;border-bottom: 1px solid #ccc;cursor: pointer;
}.fixedtool .current {background-color: #c81623;color: #fff;
}index.js
$(function() {// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current// 节流阀 互斥锁 var flag = true;// 1.显示隐藏电梯导航,当我们滚动到 今日推荐 模块，就让电梯导航显示出来var toolTop = $(".recommend").offset().top;toggleTool();// 判断的条件：被卷去的头部 大于等于 内容区域里面每个模块的offset().topfunction toggleTool() {if ($(document).scrollTop() >= toolTop) {$(".fixedtool").fadeIn();} else {$(".fixedtool").fadeOut();};}$(window).scroll(function() {toggleTool();// 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名// 需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号// 当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类,兄弟移除current类。if (flag) {$(".floor .w").each(function(i, ele) {if ($(document).scrollTop() >= $(ele).offset().top) {console.log(i);$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();}})}});// 2. 点击电梯导航页面可以滚动到相应内容区域$(".fixedtool li").click(function() {flag = false;console.log($(this).index());// 当我们每次点击小li 就需要计算出页面要去往的位置 // 选出对应索引号的内容区的盒子 计算它的.offset().topvar current = $(".floor .w").eq($(this).index()).offset().top;// 页面动画滚动效果$("body, html").stop().animate({scrollTop: current}, function() {flag = true;});// 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名$(this).addClass("current").siblings().removeClass();})
})
Jquery--02--案例相关推荐
- JQuery-学习笔记07【高级——JQuery高级案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- jQuery综合案例——打地鼠(教学版本·附源码)
jQuery综合案例--打地鼠 非常经典的案例,完整的训练[jQuery]并且针对[setInterval]与[setTimeout]有一个实质性的训练,学习价值超高,建议教师与学生下载,并用于教学与 ...
- jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 前端工程师之jquery实战案例大集合-彭亮-专题视频课程
前端工程师之jquery实战案例大集合-17028人已学习 课程介绍 详细介绍了一个js类库的实战应用,这里主要讲解jquery.是一个可以很容易就做各种网页特效的面相对象的方法函数集 ...
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> <inpu ...
- jQuery项目案例(一):电影排行榜项目
jQuery项目案例一:电影排行榜项目 项目介绍 项目效果图 项目核心知识点 jQuery选择器 jQuery事件类型 jQuery标签操作 项目源代码 HTML代码 CSS样式 JS代码 项目介绍 ...
- jQuery五角星案例
jQuery五角星案例 文章目录 jQuery五角星案例 <!DOCTYPE html><html lang="en"><head><me ...
- jQuery项目案例
文章目录 1.动态添加和删除数据 2.微博发布 3.移动水果 4.上下拉切换 5.精品演示 6.tab标签切换 7.突出显示 8.下拉菜单 9.页面滚动 10.王者手风琴 总结 1.动态添加和删除数据 ...
- jQuery 简单案例
案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
最新文章
- react-webpack-express
- OPENCV已知内参求外参
- spring框架中JDK和CGLIB动态代理区别
- 伪mac android,Mac，android sdk，monkey压力测试,真机
- Visual Studio调试之断点技巧篇
- hdu 1874畅通工程续（基础Floyd）
- JSON数据表示格式简介（JavaScript对象表示法）
- Day11多态部分-6 【1.4 多态的应用以及注意事项】
- 【EasyUI】DataGrid实现表格的筛选过滤、排序
- Spring Batch教程–最终指南
- android 字符串对齐,android – 使用Spanable String对齐ImageSpan
- puppeteer api_使用Node.js和Puppeteer API生成PDF文件
- Python自学教程3-英语不好，变量怎么命名
- 最土团购系统常见问题的汇总
- 五、肿瘤全基因组学体细胞结构突变特征（Patterns of somatic structural variation in human cancer genomes）
- CodeForces 417D Cunning Gena 状压dp
- 科普 | 数据安全与网络安全（一）概念篇
- Directx11进阶教程之Tiled Based Deffered Shading
- High Version Count Issues（SQL高Version Count） (文档 ID 296377.1)
- CubeMx工程，jlink无法识别到设备