diff --git a/README b/README new file mode 100644 index 0000000..e69de29 diff --git a/cart.html b/cart.html new file mode 100644 index 0000000..5ab70c9 --- /dev/null +++ b/cart.html @@ -0,0 +1,411 @@ + + + + + + 购物车 + + + + + + + +
+ +
+ + 购物车 +
+
+ + +
+ +
+ 您正在安全购物环境中，请放心购物 +
+ +
+ +
+ +
+
+
+
+
+
+ + 京东自营 +
+
运费优惠一百块
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ + 京东自营 +
+
运费优惠一百块
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ + 京东自营 +
+
运费优惠一百块
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ + + + + +
+
这是咱们产品的一个描述,它老牛差了块来买不哈哈哈哈哈哈哈哈哈啊
+
¥999
+
+
+ - + + + + +
+ +
+ + +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/category.html b/category.html new file mode 100644 index 0000000..c58dbbf --- /dev/null +++ b/category.html @@ -0,0 +1,170 @@ + + + + + + + 京东商品分类 - + 京东商城 + + + + + + + + +
+ +
+ +
+ + + +
+
+
+ + +
+ +
+ +
+ +
+ +
+ + + +
+

各种手机

+ +
+ +
+

各种衣服

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..c72b3ff --- /dev/null +++ b/css/base.css @@ -0,0 +1,182 @@ +*, +::before, +::after{ + margin: 0; + padding: 0; + + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -webkit-tap-highlight-color: transparent; +} + +body{ + font-family: "Microsoft YaHei", sans-serif; + font-size: 12px; + color: #000; +} + +a{ + text-decoration: none; + color: #666; +} + +ul,ol{ + list-style: none; +} + +input, textarea{ + outline: none; + border: none; + /*取出iPhone手机非扁平化效果*/ + -webkit-appearance: none; +} + +.clearfix::before, +.clearfix::after{ + content: "."; + /* 注意点 */ + display: block; + height: 0; + line-height: 0; + clear: both; + /* 保持内容的占位,但是隐藏显示 */ + visibility: hidden; +} + +/*正则匹配知识*/ +[class ^= "icon_"]{ + background: url("../images/sprites.png") no-repeat; + -webkit-background-size: 200px 200px; + background-size: 200px 200px; +} + +/* 顶部header */ +.jd_base_header{ + width: 100%; +} + +/* header的顶部 */ +.jd_base_header .jd_topbar{ + width: 100%; + height: 44px; + line-height: 44px; + text-align: center; + + background: url("../images/header-bg.png") repeat-x; + -webkit-background-size: 1px 44px; + background-size: 1px 44px; + + position: relative; +} +.jd_topbar .icon_back{ + position: absolute; + left: 0; + top: 0; + width: 38px; + height: 44px; + + background-position: -20px 0; + /*由于图片大小是20 20*/ + padding: 12px 9px; + + /* 背景图相对于内容框来定位 */ + -webkit-background-clip: content-box; + background-clip: content-box; + /* 背景图定位从内容开始计算 */ + -webkit-background-origin: content-box; + background-origin: content-box; +} +.jd_topbar .icon_shortcut{ + position: absolute; + right: 10px; + top: 0; + width: 40px; + height: 44px; + + background-position: -60px 0; + /*由于图片大小是20 20*/ + padding: 12px 10px; + + /* 背景图相对于内容框来定位 */ + -webkit-background-clip: content-box; + background-clip: content-box; + /* 背景图定位从内容开始计算 */ + -webkit-background-origin: content-box; + background-origin: content-box; +} + +.jd_topbar span.jd_topbar_title{ + font-size: 16px; +} + +.jd_topbar form{ + width: 100%; + height: 44px; + padding-left: 40px; + padding-right: 50px; +} + +.jd_topbar .icon_search{ + position: absolute; + left: 50px; + top: 12px; + + background-position: -60px -109px; + width: 20px; + height: 20px; +} +.jd_topbar form input{ + margin-top: 5px; + height: 34px; + width: 100%; + padding-left: 30px; + + border: 1px solid #e0e0e0; + border-radius: 17px; +} +/* header底部的shortcut */ +.jd_base_header .jd_shortcut{ + display: table; + width: 100%; + height: 57px; + background: #404042; +} + +.jd_shortcut li{ + display: table-cell; + width: 25%; + height: 100%; + text-align: center; +} +.jd_shortcut li.current{ + background: #2d2d2d; +} +.jd_shortcut li a{ + display: block; + width: 100%; + height: 100%; +} + +.jd_shortcut li a span{ + display: block; + width: 30px; + height: 30px; + margin: 0 auto; + margin-top: 5px; +} +.jd_shortcut li a span.icon_home{ + background-position: -30px -27px; +} +.jd_shortcut li a span.icon_category{ + background-position: -60px -27px; +} +.jd_shortcut li a span.icon_cart{ + background-position: -90px -27px; +} +.jd_shortcut li a span.icon_me{ + background-position: -120px -27px; +} +.jd_shortcut li a p{ + color: #fff; +} \ No newline at end of file diff --git a/css/cart.css b/css/cart.css new file mode 100644 index 0000000..f09610e --- /dev/null +++ b/css/cart.css @@ -0,0 +1,345 @@ +body{ + background: #f3f3f3; +} + +.jd_safe_tip{ + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + + background: #fff; +} + +.jd_safe_tip span{ + font-size: 14px; + + position: relative; + padding-left: 20px; + /*display: inline-block;*/ +} + +.jd_safe_tip span::before{ + content: ""; + background: url("../images/safe_icon.png") no-repeat; + + -webkit-background-size: 18px 18px; + background-size: 18px 18px; + + width: 18px; + height: 18px; + + position: absolute; + left: 0; + top: 0; +} + +/* 商铺们 */ + +.jd_shop_group{ + padding: 10px; +} + +.jd_shop_group .jd_shop{ + width: 100%; + /* 测试高度 */ + /*height: 200px;*/ + background: #fff; +} + +/*商铺顶部*/ +.jd_shop .jd_shop_header{ + width: 100%; + height: 44px; + /*background: orange;*/ +} +.jd_shop_header .shop_header_left{ + float: left; + height: 44px; + width: 44px; + + position: relative; +} +.checkbox{ + position: absolute; + left: 7px; + top: 12px; + + background: url("../images/shop-icon.png") no-repeat; + -webkit-background-size: 50px 100px; + background-size: 50px 100px; + + background-position: -25px 0; + width: 20px; + height: 20px; +} +.checkbox[checked]{ + background-position: 0 0; +} + +.jd_shop_header .shop_header_con{ + width: 100%; + height: 44px; + line-height: 44px; + padding-left: 50px; +} + +.shop_header_con .shop_title{ + display: inline-block; + + + position: relative; +} + +.shop_header_con .shop_title .shop_title_logo{ + position: absolute; + left: 0; + top: 14px; + + background: url("../images/buy-logo.png") no-repeat; + + -webkit-background-size: 16px 16px; + background-size: 16px 16px; + + width: 16px; + height: 16px; +} +.shop_header_con .shop_title .shop_title_name{ + margin-left: 20px; +} + +.shop_header_con .shop_transport_info{ + color: #f23030; + text-align: right; + float: right; + margin-right: 7px; +} + +.jd_shop .shop_goods{ + border-bottom: 2px solid #e0e0e0; + +} + +.shop_goods .goods_left{ + position: relative; +} +.shop_goods .checkbox{ + top: 35px; +} + +.shop_goods .goods_con{ + width: 100%; + padding-left: 30px; + /*background: lightblue;*/ +} + +.goods_con .goods_con_link{ + float: left; + display: block; + width: 88px; + height: 88px; + margin-top: 10px; +} +.goods_con .goods_con_link img{ + display: block; + width: 100%; + height: 100%; +} + +.goods_con .goods_con_detail{ + overflow: hidden; + padding: 10px; +} + +.goods_con_detail .detail_desc{ + height: 29px; + line-height: 15px; + font-size: 13px; + /* 少了两行的限制hidden */ + overflow: hidden; +} +.goods_con_detail .detail_price{ + font-size: 16px; + color: #f23030; + margin-top: 5px; +} + +.goods_con_detail .detail_bottom{ + margin-top: 5px; +} + +.detail_bottom .goods_count{ + float: left; + border: 1px solid #e0e0e0; +} + +.detail_bottom .goods_count span{ + display: block; + width: 30px; + height: 30px; + text-align: center; + line-height: 30px; +} +.detail_bottom .goods_count .minus{ + float: left; +} +.detail_bottom .goods_count .add{ + float: right; +} +.detail_bottom .goods_count input{ + border-left: 1px solid #e0e0e0; + border-right: 1px solid #e0e0e0; + width: 50px; + height: 30px; + line-height: 30px; + text-align: center; +} + +.detail_bottom .rubbishbox{ + float: right; +} + +.rubbishbox .up{ + display: block; + + background: url("../images/delete_up.png") no-repeat; + -webkit-background-size: 18px 4px; + background-size: 18px 4px; + + width: 18px; + height: 4px; +} + +.rubbishbox .down{ + display: block; + + background: url("../images/delete_down.png") no-repeat; + -webkit-background-size: 18px 18px; + background-size: 18px 18px; + + width: 18px; + height: 18px; + margin-top: -3px; +} + + +/*自定义alert*/ +.alert_cover{ + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0 ,0, 0.6); +} + +.alert_cover .alert{ + position: absolute; + left: 5%; + top: 190px; + + width: 90%; + /*测试高度*/ + /*height: 90px;*/ + background: #fff; + + border: 1px solid #e0e0e0; + border-radius: 5px; +} + +.alert .alert_top{ + width: 100%; + height: 44px; + line-height: 44px; + text-align: center; + font-size: 16px; + + border-bottom: 1px solid #e0e0e0; +} + +.alert .alert_bottom{ + width: 100%; + height: 50px; + padding: 10px; +} + +.alert_bottom .alert_bottom_left, +.alert_bottom .alert_bottom_right{ + width: 45%; + height: 30px; + line-height: 30px; + text-align: center; + border: 1px solid #e0e0e0; + border-radius: 5px; + +} + +.alert_bottom .alert_bottom_left{ + float: left; + background: #f23030; + color: #fff; +} + +.alert_bottom .alert_bottom_right{ + float: right; +} + + +.spring_jump{ + animation: spring_jump 1s ease; +} + +@keyframes spring_jump { + 0%{ + opacity: 0; + transform: translateY(-3000px); + } + 65%{ + opacity: 1; + transform: translateY(40px); + } + 75%{ + opacity: 1; + transform: translateY(-20px); + } + 85%{ + opacity: 1; + transform: translateY(10px); + } + 95%{ + opacity: 1; + transform: translateY(-5px); + } + 100%{ + opacity: 1; + transform: translateY(0px); + } +} + +/* optional */ +@-webkit-keyframes spring_jump { + 0%{ + opacity: 0; + transform: translateY(-3000px); + } + 65%{ + opacity: 1; + transform: translateY(40px); + } + 75%{ + opacity: 1; + transform: translateY(-20px); + } + 85%{ + opacity: 1; + transform: translateY(10px); + } + 95%{ + opacity: 1; + transform: translateY(-5px); + } + 100%{ + opacity: 1; + transform: translateY(0px); + } +} \ No newline at end of file diff --git a/css/category.css b/css/category.css new file mode 100644 index 0000000..2c69e0c --- /dev/null +++ b/css/category.css @@ -0,0 +1,99 @@ +body{ + width: 100%; + height: 100%; + background: #fff; +} + + + +/* 主要内容 */ +.jd_main{ + width: 100%; + /* 一会儿用js搞它 */ + height: auto; + overflow: hidden; +} + +/* 左边表 */ +.jd_main .jd_main_left{ + float: left; + width: 76px; + height: 100%; + + overflow: hidden; +} + +.jd_main_left ul{ + width: 100%; +} + +.jd_main_left ul li{ + width: 100%; + height: 46px; + text-align: center; + line-height: 46px; + border-right: 1px solid #e0e0e0; + border-bottom: 1px solid #e0e0e0; +} +.jd_main_left ul li a{ + display: block; + width: 100%; + height: 100%; +} +.jd_main_left ul li.current a{ + color: #f23030; +} + + +/* 右边内容 */ +.jd_main .jd_main_right{ + overflow: hidden; + padding: 7px; + + background: rgb(243, 245, 247); +} + +/* 右边顶部广告 */ +.jd_main_right .jd_category_banner img{ + display: block; + width: 100%; +} + +/* 右边的section们统一的样式 */ +.jd_main_right .jd_category_seciton{ + width: 100%; + margin-top: 10px; +} +.jd_main_right .jd_category_seciton h4{ + font-weight: normal; + width: 100%; + height: 30px; + line-height: 30px; +} + +.jd_main_right .jd_category_seciton ul{ + width: 100%; + + background: #fff; + padding: 7px; +} + +.jd_main_right .jd_category_seciton ul li{ + float: left; + width: 32.8%; + text-align: center; + padding: 10px; +} +.jd_main_right .jd_category_seciton ul li a{ + display: block; + width: 100%; + height: 100%; +} + +.jd_main_right .jd_category_seciton ul li a img{ + display: block; + width: 100%; +} +.jd_main_right .jd_category_seciton ul li a p{ + margin-top: 10px; +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..66ed455 --- /dev/null +++ b/css/index.css @@ -0,0 +1,512 @@ + +body{ + background: #f3f3f3; +} + +.jd_viewport{ + min-width: 300px; + max-width: 640px; + + /*测试性质的高度*/ + /*height: 3000px;*/ + + + margin: 0 auto; + margin-bottom: 60px; + /*background: green;*/ + + position: relative; +} + +/*顶部布局*/ +.jd_viewport .jd_header{ + position: fixed; + left: 0; + top: 0; + height: 44px; + width: 100%; + + z-index: 999; +} +.jd_header .jd_topbar{ + min-width: 300px; + max-width: 640px; + height: 44px; + position: relative; + margin: 0 auto; + + background: rgba(201, 21, 35, 0); +} + +.jd_topbar .icon_logo{ + position: absolute; + left: 5px; + top: 7px; + + background-position: 0 -103px; + width: 60px; + height: 30px; +} +.jd_topbar .jd_login{ + position: absolute; + right: 0; + top: 0; + + width: 50px; + height: 44px; + line-height: 44px; + text-align: center; + font-size: 16px; + color: #fff; +} + +.jd_topbar form{ + padding-left: 70px; +} + +.jd_topbar .icon_search{ + left: 77px; +} + + +/*底部布局*/ +.jd_viewport .jd_footer{ + position: fixed; + bottom: 0; + left: 0; + width: 100%; + /*iPhone手机内部的tabBar默认高度是49*/ + height: 50px; + background: #fff; + + border-top: 1px solid #e0e0e0; + box-shadow: 0 -2px 2px #ccc; +} +.jd_footer ul{ + width: 100%; +} +.jd_footer ul li{ + float: left; + width: 20%; + text-align: center; +} +.jd_footer ul li a{ + width: 100%; + display: block; +} +.jd_footer ul li a img{ + width: 65px; + height: 50px; +} + +/*焦点图*/ +.jd_viewport .jd_banner{ + width: 100%; + overflow: hidden; + + position: relative; +} +.jd_banner ul{ + width: 1000%; + + -webkit-transform: translateX(-10%); + transform: translateX(-10%); +} +.jd_banner ul li{ + float: left; + width: 10%; +} +.jd_banner ul li a{ + display: block; + width: 100%; +} +.jd_banner ul li a img{ + width: 100%; +} + +.jd_banner ol{ + width: 144px; + height: 6px; + + position: absolute; + left: 50%; + bottom: 12px; + margin-left: -72px; +} +.jd_banner ol li{ + float: left; + width: 6px; + height: 6px; + border: 1px solid #e0e0e0; + border-radius: 50%; + /* (144 - 8*6)/16 */ + margin: 0 6px; +} +.jd_banner ol li.current{ + background: #fff; +} + +/*分类索引*/ + +.jd_viewport .jd_categories{ + width: 100%; + margin-top: 10px; +} +.jd_categories ul{ + width: 100%; +} +.jd_categories ul li{ + float: left; + width: 20%; + text-align: center; + margin-bottom: 10px; +} +.jd_categories ul li a{ + display: block; + width: 100%; + height: 60px; +} +.jd_categories ul li a img{ + width: 40px; +} + +.jd_categories ul li a p{ + width: 100%; + height: 20px; + font-size: 13px; + line-height: 20px; +} + +/*产品中心3部曲*/ +.jd_viewport .jd_main{ + width: 100%; + margin-top: 10px; +} +/*1st 秒杀类*/ +.jd_main .jd_seckill{ + width: 100%; + + /*伪高度,做完记得删哦*/ + /*height: 200px;*/ + background: #fff; +} + +.jd_seckill .seckill_header{ + width: 100%; + height: 36px; + + /*background: lightcyan;*/ +} + +.seckill_header .seckill_header_left{ + float: left; + width: 68%; + height: 36px; + line-height: 36px; + display: inline-block; +} + +.seckill_header_left img.seckill_img{ + float: left; + width: 69px; + height: 27px; + margin-top: 5px; + margin-left: 5px; +} +.seckill_header_left strong{ + float: left; + font-size: 15px; + margin-left: 5px; + height: 36px; + line-height: 36px; + /*font-family: "Microsoft JhengHei";*/ + color: #181818; +} + +.seckill_header_left .seckill_timer{ + float: left; + margin-left: 6px; +} + +.seckill_header_left .seckill_timer .time{ + float: left; + width: 18px; + height: 17px; + line-height: 16px; + border: 1px solid #e0e0e0; + margin-top: 10px; + +} + +.seckill_header_left .seckill_timer span{ + float: left; + color: #666; + width: 50%; + + text-align: center; + +} +.seckill_header_left .seckill_timer span.colon{ + width: 6px; +} + +.seckill_header .seckill_header_right +{ + float: right; + width: 32%; + color: #f23030; + text-align: right; + height: 36px; + line-height: 36px; + padding-right: 22px; + + position: relative; +} +.seckill_header .seckill_header_right::after{ + content: ""; + + background: url("../images/arrow_rt.png") no-repeat; + -webkit-background-size: 12px 12px; + background-size: 12px 12px; + + width: 12px; + height: 12px; + + position: absolute; + right: 8px; + top: 12px; +} + +/*秒杀内容*/ +.jd_seckill .seckill_con{ + width: 100%; +} +.seckill_con ul{ + width: 100%; +} +.seckill_con ul li{ + float: left; + width: 33.33%; + text-align: center; + + padding: 7px; + +} +.seckill_con ul li a{ + display: block; + width: 100%; + border-right: 1px solid #e0e0e0; +} + +.seckill_con ul li:last-child a{ + border-right: none; +} +.seckill_con ul li a img{ + width: 80%; +} + +.seckill_con ul li strong, +.seckill_con ul li span{ + display: block; + width: 100%; + height: 20px; + line-height: 20px; +} +.seckill_con ul li strong{ + color: #f23030; + font-size: 15px; +} +.seckill_con ul li span{ + color: #666; + text-decoration: line-through; +} + +/*2th 主题类产品*/ +.jd_main section{ + width: 100%; + margin-top: 10px; + + background: #fff; +} + +/*标题*/ +.jd_main section .section_header{ + width: 100%; + height: 36px; + line-height: 36px; + border-bottom: 1px solid #e0e0e0; +} + +.section_header h3{ + font-size: 15px; + font-weight: normal; + padding-left: 18px; + + position: relative; +} + +.section_header h3::before{ + content: ""; + background: #f23030; + width: 4px; + height: 26px; + + position: absolute; + left: 10px; + top: 5px; +} + +.jd_main section .section_con{ + width: 100%; +} +.section_con img{ + display: block; + width: 100%; +} + +/*主题类产品的公共样式*/ + +.half_w{ + width: 50%; +} +.float_l{ + float: left; +} + +.float_r{ + float: right; +} +.border_r{ + border-right: 1px solid #e0e0e0; + } +.border_l{ + border-left: 1px solid #e0e0e0; +} +.border_b{ + border-bottom: 1px solid #e0e0e0; +} + +/*3th 推荐类*/ +.jd_main .jd_recommend{ + margin-top: 10px; + width: 100%; +} + +.jd_recommend .recommend_header{ + height: 36px; + line-height: 36px; + padding: 0 7px; + text-align: center; + /*background: lightblue;*/ + + position: relative; +} + +.recommend_header .header_span{ + background: #f3f3f3; + font-size: 16px; + padding: 3px 10px; + padding-left: 30px; + + position: relative; +} + +.recommend_header .header_span .arrow_img{ + float: left; + background: url("../images/intro_arrow.png") no-repeat; + + -webkit-background-size: 13px 13px; + background-size: 13px 13px; + + width: 13px; + height: 13px; + + + position: absolute; + left: 10px; + top: 8px; + + margin-right: 10px; +} + +.jd_recommend .recommend_header::before{ + content: ""; + position: absolute; + left: 0; + top: 50%; + display: block; + + width: 100%; + height: 1px; + + background: #e0e0e0; +} + +.jd_recommend .recommend_con{ + margin-top: 10px; + width: 100%; +} +/*推荐内容*/ +.recommend_con ul{ + width: 100%; +} + +.recommend_con ul li{ + float: left; + width: 49%; + + background: #fff; + /*height: 400px;*/ + margin-bottom: 10px; +} +.recommend_con ul li:nth-of-type(2n){ + float: right; +} + +.recommend_con ul li>a{ + display: block; + width: 100%; + text-align: center; +} +.recommend_con ul li>a img{ + display: block; + width: 100%; + margin-bottom: 5px; +} +.recommend_con ul li>a span{ + padding: 2px 3px; + display: block; + text-align: left; + font-size: 14px; + width: 100%; + height: 34px; + line-height: 15px; + overflow: hidden; +} + +.recommend_con .recommend_con_bottom{ + width: 100%; + height: 36px; + line-height: 36px; + padding: 7px; +} +.recommend_con .recommend_con_bottom .pro_price{ + float: left; + color: #f23030; + font-size: 16px; + /*margin-left: 10px;*/ + +} + +.recommend_con .recommend_con_bottom .find_like{ + float: right; + border: 1px solid #e0e0e0; + border-radius: 2px; + width: 60px; + font-size: 14px; + text-align: center; + height: 26px; + line-height: 26px; + /*margin-top: 5px;*/ + /*margin-right: 10px;*/ +} \ No newline at end of file diff --git a/images/a-home.png b/images/a-home.png new file mode 100644 index 0000000..3187201 Binary files /dev/null and b/images/a-home.png differ diff --git a/images/arrow_rt.png b/images/arrow_rt.png new file mode 100644 index 0000000..dc2bbc6 Binary files /dev/null and b/images/arrow_rt.png differ diff --git a/images/banner_1.jpg b/images/banner_1.jpg new file mode 100644 index 0000000..54d8657 Binary files /dev/null and b/images/banner_1.jpg differ diff --git a/images/banner_1.png b/images/banner_1.png new file mode 100644 index 0000000..5b1cd49 Binary files /dev/null and b/images/banner_1.png differ diff --git a/images/buy-logo.png b/images/buy-logo.png new file mode 100644 index 0000000..80aa3b0 Binary files /dev/null and b/images/buy-logo.png differ diff --git a/images/buy-pro1.jpg b/images/buy-pro1.jpg new file mode 100644 index 0000000..aa1fd78 Binary files /dev/null and b/images/buy-pro1.jpg differ diff --git a/images/cp1.jpg b/images/cp1.jpg new file mode 100644 index 0000000..df9ce96 Binary files /dev/null and b/images/cp1.jpg differ diff --git a/images/cp2.jpg b/images/cp2.jpg new file mode 100644 index 0000000..2e662d8 Binary files /dev/null and b/images/cp2.jpg differ diff --git a/images/cp3.jpg b/images/cp3.jpg new file mode 100644 index 0000000..9b0d5c5 Binary files /dev/null and b/images/cp3.jpg differ diff --git a/images/cp4.jpg b/images/cp4.jpg new file mode 100644 index 0000000..be4ba75 Binary files /dev/null and b/images/cp4.jpg differ diff --git a/images/cp5.jpg b/images/cp5.jpg new file mode 100644 index 0000000..21b3d2e Binary files /dev/null and b/images/cp5.jpg differ diff --git a/images/cp6.jpg b/images/cp6.jpg new file mode 100644 index 0000000..55b9c80 Binary files /dev/null and b/images/cp6.jpg differ diff --git a/images/delete_down.png b/images/delete_down.png new file mode 100644 index 0000000..473d750 Binary files /dev/null and b/images/delete_down.png differ diff --git a/images/delete_up.png b/images/delete_up.png new file mode 100644 index 0000000..6240f42 Binary files /dev/null and b/images/delete_up.png differ diff --git a/images/detail01.jpg b/images/detail01.jpg new file mode 100644 index 0000000..1ca606b Binary files /dev/null and b/images/detail01.jpg differ diff --git a/images/detail02.jpg b/images/detail02.jpg new file mode 100644 index 0000000..5de2ae6 Binary files /dev/null and b/images/detail02.jpg differ diff --git a/images/detail03.jpg b/images/detail03.jpg new file mode 100644 index 0000000..d34ceb0 Binary files /dev/null and b/images/detail03.jpg differ diff --git a/images/focus-icon.png b/images/focus-icon.png new file mode 100644 index 0000000..891d84c Binary files /dev/null and b/images/focus-icon.png differ diff --git a/images/header-bg.png b/images/header-bg.png new file mode 100644 index 0000000..a39099a Binary files /dev/null and b/images/header-bg.png differ diff --git a/images/icon-updown-arrow.png b/images/icon-updown-arrow.png new file mode 100644 index 0000000..8e8239f Binary files /dev/null and b/images/icon-updown-arrow.png differ diff --git a/images/intro1.jpg b/images/intro1.jpg new file mode 100644 index 0000000..22b8c7d Binary files /dev/null and b/images/intro1.jpg differ diff --git a/images/intro2.jpg b/images/intro2.jpg new file mode 100644 index 0000000..6a23905 Binary files /dev/null and b/images/intro2.jpg differ diff --git a/images/intro3.jpg b/images/intro3.jpg new file mode 100644 index 0000000..b4bc221 Binary files /dev/null and b/images/intro3.jpg differ diff --git a/images/intro4.jpg b/images/intro4.jpg new file mode 100644 index 0000000..6a5abe6 Binary files /dev/null and b/images/intro4.jpg differ diff --git a/images/intro_arrow.png b/images/intro_arrow.png new file mode 100644 index 0000000..b91b0c7 Binary files /dev/null and b/images/intro_arrow.png differ diff --git a/images/l1.jpg b/images/l1.jpg new file mode 100644 index 0000000..84a3f0e Binary files /dev/null and b/images/l1.jpg differ diff --git a/images/l2.jpg b/images/l2.jpg new file mode 100644 index 0000000..5a422ff Binary files /dev/null and b/images/l2.jpg differ diff --git a/images/l3.jpg b/images/l3.jpg new file mode 100644 index 0000000..6c1c3d0 Binary files /dev/null and b/images/l3.jpg differ diff --git a/images/l4.jpg b/images/l4.jpg new file mode 100644 index 0000000..84fbe76 Binary files /dev/null and b/images/l4.jpg differ diff --git a/images/l5.jpg b/images/l5.jpg new file mode 100644 index 0000000..6047aa5 Binary files /dev/null and b/images/l5.jpg differ diff --git a/images/l6.jpg b/images/l6.jpg new file mode 100644 index 0000000..6aa57dd Binary files /dev/null and b/images/l6.jpg differ diff --git a/images/l7.jpg b/images/l7.jpg new file mode 100644 index 0000000..f7e4bb2 Binary files /dev/null and b/images/l7.jpg differ diff --git a/images/l8.jpg b/images/l8.jpg new file mode 100644 index 0000000..f1e9465 Binary files /dev/null and b/images/l8.jpg differ diff --git a/images/n-cart.png b/images/n-cart.png new file mode 100644 index 0000000..283416b Binary files /dev/null and b/images/n-cart.png differ diff --git a/images/n-catergry.png b/images/n-catergry.png new file mode 100644 index 0000000..39df22e Binary files /dev/null and b/images/n-catergry.png differ diff --git a/images/n-find.png b/images/n-find.png new file mode 100644 index 0000000..3ec658d Binary files /dev/null and b/images/n-find.png differ diff --git a/images/n-me.png b/images/n-me.png new file mode 100644 index 0000000..d939b28 Binary files /dev/null and b/images/n-me.png differ diff --git a/images/nav1.png b/images/nav1.png new file mode 100644 index 0000000..7f110e5 Binary files /dev/null and b/images/nav1.png differ diff --git a/images/nav10.png b/images/nav10.png new file mode 100644 index 0000000..fe3db48 Binary files /dev/null and b/images/nav10.png differ diff --git a/images/nav2.png b/images/nav2.png new file mode 100644 index 0000000..e012f3f Binary files /dev/null and b/images/nav2.png differ diff --git a/images/nav3.png b/images/nav3.png new file mode 100644 index 0000000..587b5fa Binary files /dev/null and b/images/nav3.png differ diff --git a/images/nav4.png b/images/nav4.png new file mode 100644 index 0000000..36a9b26 Binary files /dev/null and b/images/nav4.png differ diff --git a/images/nav5.png b/images/nav5.png new file mode 100644 index 0000000..d019676 Binary files /dev/null and b/images/nav5.png differ diff --git a/images/nav6.png b/images/nav6.png new file mode 100644 index 0000000..827d0dd Binary files /dev/null and b/images/nav6.png differ diff --git a/images/nav7.png b/images/nav7.png new file mode 100644 index 0000000..3f11141 Binary files /dev/null and b/images/nav7.png differ diff --git a/images/nav8.png b/images/nav8.png new file mode 100644 index 0000000..8072da2 Binary files /dev/null and b/images/nav8.png differ diff --git a/images/nav9.png b/images/nav9.png new file mode 100644 index 0000000..d1efd7d Binary files /dev/null and b/images/nav9.png differ diff --git a/images/none.png b/images/none.png new file mode 100644 index 0000000..b66bd7d Binary files /dev/null and b/images/none.png differ diff --git a/images/nv-fy.jpg b/images/nv-fy.jpg new file mode 100644 index 0000000..abd12f9 Binary files /dev/null and b/images/nv-fy.jpg differ diff --git a/images/safe_icon.png b/images/safe_icon.png new file mode 100644 index 0000000..728465e Binary files /dev/null and b/images/safe_icon.png differ diff --git a/images/scroll-to-top-icon.png b/images/scroll-to-top-icon.png new file mode 100644 index 0000000..44ff53a Binary files /dev/null and b/images/scroll-to-top-icon.png differ diff --git a/images/seckill-icon.png b/images/seckill-icon.png new file mode 100644 index 0000000..e23bb68 Binary files /dev/null and b/images/seckill-icon.png differ diff --git a/images/seckill_1.jpg b/images/seckill_1.jpg new file mode 100644 index 0000000..b1b83b3 Binary files /dev/null and b/images/seckill_1.jpg differ diff --git a/images/shop-icon.png b/images/shop-icon.png new file mode 100644 index 0000000..1743d27 Binary files /dev/null and b/images/shop-icon.png differ diff --git a/images/sprites.png b/images/sprites.png new file mode 100644 index 0000000..e669496 Binary files /dev/null and b/images/sprites.png differ diff --git a/images/sprits_btm_new.png b/images/sprits_btm_new.png new file mode 100644 index 0000000..71bbd1b Binary files /dev/null and b/images/sprits_btm_new.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..db56e0e --- /dev/null +++ b/index.html @@ -0,0 +1,276 @@ + + + + + + + + + + 专业网上购物京东商城!-品质保证 + + + + + + +
+ +
+
+ +
+ + + +
+ +
+ +
+ +
+ +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
  7. +
  8. +
+
+ +
+ +
+ +
+ +
+
+ + + 8点场 +
+
+ 0 + 0 +
+ : +
+ 0 + 0 +
+ : +
+ 0 + 0 +
+
+ + 更多 +
+
+
    +
  • + + ¥1999 + ¥12099 +
    • +
  • + + ¥999 + ¥1099 +
    • +
  • + + ¥999 + ¥1099 +
    • +
+
+
+ + +
+

京东乐购

+
+
    +
    • +
    • +
    • +
+
+
+ +
+

京东超市

+
+
    +
    • +
    • +
    • +
+
+
+ +
+

爱生活

+
+
    +
    • +
    • +
    • +
+
+
+ + +
+ +
+ + + 为您推荐 + +
+
+ +
+
+ +
+ +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/js/base.js b/js/base.js new file mode 100644 index 0000000..c72e1ef --- /dev/null +++ b/js/base.js @@ -0,0 +1,57 @@ +/** + * Created by Administrator on 2017/5/20. + */ + +window.mjd = {}; + +/** + * 1.如果手指滑动了,就不是tap了 + * 2.如果 touchstart于touchend 两个事件间隔超过 duration, 认为不是tap, 而是LongPress + * */ +mjd.tap = function (obj, callback) {// obj是tap的对象, callback是tap的回调 + if (typeof(obj) != 'object'){ + console.log('error:typeof(obj) != object '); + return; + } + + var ismoving = false; + var duration = 300; // 毫秒级别 + var startTime = Date.now(); + obj.addEventListener('touchstart', function (e) { + startTime = Date.now(); + }) + obj.addEventListener('touchmove', function (e) { + e.preventDefault(); + + ismoving = true; + }) + obj.addEventListener('touchend', function (e) { + if (ismoving == false && (Date.now() - startTime < duration)){ + if (callback){ // 如果有回调就执行回调 + callback(e); + } + } + + // 数据还原 + ismoving = false; + }) +} + +// shortcutDisplay +function shortcutDisplay() { + // 1.拿到标签 + var header = document.getElementsByClassName('jd_base_header')[0]; + var tap_box = header.getElementsByClassName('icon_shortcut')[0]; + var shortcutBox = header.getElementsByClassName('jd_shortcut')[0]; + + // 2.给tap_box添加tap + mjd.tap(tap_box, function (e) { + // 3.拿到当前 shortcutBox.style.display + var cur_display = shortcutBox.style.display; + if (cur_display == 'none'){ + shortcutBox.style.display = 'table'; + }else if (cur_display == 'table'){ + shortcutBox.style.display = 'none'; + } + }) +} \ No newline at end of file diff --git a/js/cart.js b/js/cart.js new file mode 100644 index 0000000..bf55e74 --- /dev/null +++ b/js/cart.js @@ -0,0 +1,129 @@ +/** + * Created by Administrator on 2017/5/24. + */ +window.onload = function () { + // 展示快捷栏 + shortcutDisplay(); + + // 垃圾篓的点击 + rubbishboxTap(); + + // 残缺的check + changeChecked(); + + + // 作业2.实现点击+标签,实现input里面+1 + // goods_count> + / input,+添加tap, callback: 1.拿到input.value-> 强制转整数(value)+1, 再复制input.value +} + +// 垃圾篓 点击 +/** + * 1.垃圾篓打开盖子, 就是让up旋转 + * + * 2.弹出自定义alert + * */ +function rubbishboxTap() { + // 1.拿到标签 + var rubbishBoxs = document.getElementsByClassName('rubbishbox'); + var alertCover = document.getElementsByClassName('alert_cover')[0]; + var alert = alertCover.getElementsByClassName('alert')[0]; + + var cancleBox = alert.getElementsByClassName('alert_bottom_left')[0]; + var sureBox = alert.getElementsByClassName('alert_bottom_right')[0]; + + // 标记点击tap_box的盖子 + var up; + for (var i = 0; i < rubbishBoxs.length; i++){ + (function (index) { + var tap_box = rubbishBoxs[index]; + mjd.tap(tap_box, function (e) { + // console.log(e.target.parentNode == tap_box); + // 1.拿到盖子 + up = tap_box.getElementsByClassName('up')[0]; + + // 2.让他旋转 + // 2.1 设置过渡 + up.style.transition = 'all .2s ease'; + up.style.webkitTransition = 'all .2s ease'; + + // 2.2设置旋转原点 + up.style.transformOrigin = 'left 3px'; + up.style.webkitTransformOrigin = 'left 3px'; + + // 2.3 设置旋转 + up.style.transform = 'rotate(-30deg)'; + up.style.webkitTransform = 'rotate(-30deg)'; + + // 3.弹出自定义alert(alertcover:display切换) + alertCover.style.display = 'block'; + + // 4.解决弹出动画 + alert.className = 'alert spring_jump'; + }) + })(i); + } + + + // 给取消按钮添加tap + mjd.tap(cancleBox, function (e) { + // 转回去 + up.style.transform = 'none'; + up.style.webkitTransform = 'none'; + // 再通过延时操作,解决display与过渡冲突问题 + setTimeout(function () { + // css3里,display切换会对 css的过渡/动画效果,产生破坏 + alertCover.style.display = 'none'; + }, 222); + }) + + mjd.tap(sureBox, function (e) { + // 1.转回去 + up.style.transform = 'none'; + up.style.webkitTransform = 'none'; + // 2.再通过延时操作,解决display与过渡冲突问题 + setTimeout(function () { + // css3里,display切换会对 css的过渡/动画效果,产生破坏 + alertCover.style.display = 'none'; + }, 222); + + // 3.将垃圾篓所在的商品给干掉 + // console.log(up.parentNode.parentNode.parentNode.parentNode.parentNode); + for (var box = up.parentNode; box.className != 'jd_shop'; box = box.parentNode){ + // console.log(box.className); + if (box.className == 'shop_goods'){ + // 让box父标签移出他的儿子box + box.parentNode.removeChild(box); + // 之所以使用break而不是用return原因, 可以之后 还有 4.5.6的操作没有写 + break; + } + } + }) +} + + +/** + * 1.由于checkbox过小,导致手势可能点到他爹身上 + * + * 2.与真实业务逻辑不符 + * + * */ +function changeChecked() { + // 1.拿到标签 + var checkBoxs = document.getElementsByClassName('checkbox'); + + for (var i = 0; i < checkBoxs.length; i++){ + // 2.给checkbox添加tap事件 + mjd.tap(checkBoxs[i], function (e) { + console.log(e.target); + var checkBox = e.target; + // 检测checkBox是否有checked + if (checkBox.hasAttribute('checked')){ + // 移出checked属性 + checkBox.removeAttribute('checked'); + }else { + // 添加checked属性以及checked属性的value + checkBox.setAttribute('checked', ''); + } + }) + } +} \ No newline at end of file diff --git a/js/category.js b/js/category.js new file mode 100644 index 0000000..a281f88 --- /dev/null +++ b/js/category.js @@ -0,0 +1,240 @@ +/** + * Created by Administrator on 2017/5/23. + */ + +window.onload = function () { + // 搞mainH + getMainH(); + + // 与左边列表的交互 + mainLeftInteraction(); + + // shortcut的展示 + shortcutDisplay(); + + // 作业1.,事项右边的滑动手势(参考左边列表的手势效果) + zuoye(); +} + +window.onresize = function () { + setTimeout(function () { + getMainH(); + }, 100); +} + +// 获取main高度 +function getMainH() { + // 1.拿到标签 + var mainbox = document.getElementsByClassName('jd_main')[0]; + var header = document.getElementsByClassName('jd_base_header')[0]; + // 2.拿到常量 + var headerH = header.offsetHeight; + var screenH = window.screen.height; + + var mainH = screenH - headerH; + + // 3.赋值 + mainbox.style.height = mainH + 'px'; +} + +// 与左边列表的交互 +/** + * 一.跟随手势进行移动 + * + * 二.tap事件 + * */ +function mainLeftInteraction() { + // 一.跟随手势进行移动 + // 1.拿到标签 + var mainLeftBox = document.getElementsByClassName('jd_main_left')[0]; + var ul_box = mainLeftBox.getElementsByTagName('ul')[0]; + + // 2.拿到常量 + var ulH = ul_box.offsetHeight; + var mainLeftH = mainLeftBox.offsetHeight; + + // topY值的变化的范围 + var topY = 0; + var ul_topMaxY = 0; + var ul_topMinY = mainLeftH - ulH; // 524 - 1104 + // 缓冲范围 + var bufferH = 138; // 46 * 3 + var ul_topBufferMaxY = ul_topMaxY + bufferH; + var ul_topBufferMinY = ul_topMinY - bufferH; + + + // 3.设置guodu,移出缓冲 ,竖直方向位移 + // 3.1 设置过渡 + function setTransition() { + ul_box.style.transition = 'all .2s ease'; + ul_box.style.webkitTransition = 'all .2s ease'; + } + + // 3.2 移除过度 + function removeTransition() { + ul_box.style.transition = 'none'; + ul_box.style.webkitTransition = 'none'; + } + + // 3.3 设置竖直方向位移 + function changeTranslateY(y) { + ul_box.style.transform = 'translateY(' + y + 'px)'; + ul_box.style.webkitTransform = 'translateY(' + y + 'px)'; + } + + // 4.跟随手势位移 + var startY,movingY,changedY; + startY = 0; + movingY = 0; + changedY = 0; + // 4.1 手势开始 + ul_box.addEventListener('touchstart', function (e) { + // 拿到初始y值 + startY = e.touches[0].clientY; + }) + // 4.2 开始滑动 + ul_box.addEventListener('touchmove', function (e) { + e.preventDefault(); // 取消默认事件 + + // 4.2.1 拿到竖直位移的改变 + movingY = e.touches[0].clientY; + changedY = movingY - startY; + + // 跟随非过渡位移 + // 4.2.2 确定topY能位移的范围,若超过范围,让滑动手势的跟随位移失效 + var temp_topY = topY + changedY; + console.log(temp_topY); + if (temp_topY > ul_topBufferMinY && temp_topY < ul_topBufferMaxY){ + removeTransition(); + changeTranslateY(temp_topY); + }else { + // ul_box非过渡位移 忽略 + } + + }) + // 4.3 结束手势 + ul_box.addEventListener('touchend', function (e) { + // 4.3.0 手势结束的时候,记录topY的改变 + // 注意:changedY 并未进行范围判断过滤,所以topY不必考虑太多 + topY = topY + changedY; // 将temp_topY赋值给topY + // 4.3.1 判断topY是否在缓冲区域,如果在进行过渡的位置就找 + console.log('touchend:', topY); + if (topY > ul_topMaxY){ // 若比最大值大,回复成最大值,并进行过渡 + topY = ul_topMaxY; + setTransition(); + changeTranslateY(topY); + }else if(topY < ul_topMinY){ // 若比最小值小,回复成最小值,并进行过渡 + topY = ul_topMinY; + setTransition(); + changeTranslateY(topY); + }else { + // 不需要过渡 + removeTransition(); + } + + // 4.3.2 数据还原 + startY = 0; + movingY = 0; + changedY = 0; + }) + + // 二.tap事件 + // 1.切换选中的li 2.让ul_box进行过渡位移->让选中的恰好处于最顶部->让topY= 负的(li的下标 * li的高度46) + + mjd.tap(ul_box, function (e) { + // console.log(e.target); + // console.log(e.target.parentNode); + // 1.拿到标签 + var li_array = ul_box.getElementsByTagName('li'); + var tap_li = e.target.parentNode; + // 2.判断若当前tap_li就是选中的,那直接返回 + if (tap_li.className == 'current'){ + console.log("tap_li is current li!!"); + return; + }else { + // 3.如果不是,消除原先的选中 + for (var i = 0; i < li_array.length; i++){ + li_array[i].className = ''; + + // 记录index + li_array[i].index = i; + } + + // 4.让当前tap_li是选中的 + tap_li.className = 'current'; + + // 5.过渡位移 + // 5.1 拿到改变后的topY + topY = - tap_li.index * 46; + // 5.2 topY值过滤 + if (topY < ul_topMinY) topY = ul_topMinY; + // 5.3 进行过渡位移 + setTransition(); + changeTranslateY(topY); + + // 6.刷新右边内容的数据(伪刷新) + var mainRight = mainLeftBox.parentNode.getElementsByClassName('jd_main_right')[0]; + // console.log(mainRight); + // 若想要拿到 element.style.display , element在html中需要有style的设置 + mainRight.style.display = 'none'; + setTimeout(function () { + mainRight.style.display = 'block'; + }, 200); + } + }) +} + +// 把变量名字修改一下 +// 或者是 + + +function zuoye() { + // 1.拿到标签 + + + // 2.拿到常量 + + + // topY值的变化的范围 + + // 缓冲范围 + var bufferH = 138; // 46 * 3 + + + + // 3.设置guodu,移出缓冲 ,竖直方向位移 + // 3.1 设置过渡 + + + // 3.2 移除过度 + + + // 3.3 设置竖直方向位移 + + + // 4.跟随手势位移 + var startY,movingY,changedY; + startY = 0; + movingY = 0; + changedY = 0; + // 4.1 手势开始 + + // 4.2 开始滑动 + + // 4.3 结束手势 + + // 4.3.0 手势结束的时候,记录topY的改变 + // 注意:changedY 并未进行范围判断过滤,所以topY不必考虑太多 + // 将temp_topY赋值给topY + // 4.3.1 判断topY是否在缓冲区域,如果在进行过渡的位置就找 + + // 若比最大值大,回复成最大值,并进行过渡 + // 若比最小值小,回复成最小值,并进行过渡 + + + // 4.3.2 数据还原 + startY = 0; + movingY = 0; + changedY = 0; + +} \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..d90bdb6 --- /dev/null +++ b/js/index.js @@ -0,0 +1,266 @@ +/** + * Created by Administrator on 2017/5/20. + */ + +window.onload = function () { + // 1首页头部透明度变化 + changeHeaderAlpha(); + + // 2焦点图 + activeBanner(); + + // 3秒杀倒计时 + seckillTimer(); +} + +window.onresize = function () { + setTimeout(function () { + window.location.reload(); + }, 200); +} + +/** + * alpha取值范围:[0,0.8]; + UI作用范围: body.scrollTop在[0, bannerH]之间 + scrollTop = bannerH一半, + * */ +function changeHeaderAlpha() { + // 1.获取标签 + var topbar = document.getElementsByClassName('jd_topbar')[0]; + var banner = document.getElementsByClassName('jd_banner')[0]; + + // 2.确定常量以及变量 + var bannerH = banner.offsetHeight; + var alpha = 0; + var alpha_max = 0.8; + var scrollTop = 0; + + // 3.监听滚动 + window.onscroll = function () { + // 3.1 拿到滚动的偏移量 + scrollTop = document.body.scrollTop; + // console.log(scrollTop); + + // 3.2 根据scrollTop确定alpha的变化 + if(scrollTop < bannerH){ + alpha = alpha_max * (scrollTop/bannerH); + }else { + alpha = alpha_max; + } + + // 3.3 为标签css改变赋值 + topbar.style.background = 'rgba(201, 21, 35, '+ alpha + ')'; + } + +} + +/** + * + * 自动无限轮播: + 1.定时器每x秒过渡滚动一次 + 2.过渡结束后: + [0, 9] -> [1,8] + index范围判断,若滚动到边界则进行index转移以及非过渡位移 + 切换白点 + + 手势滑动 + 1.手势开始时停止计时器 + 2.滑动手势期间: + - 清除默认事件event.preventDefault + - 非过渡滚动:切换x值=当前index值*bannerW+movedX + 3.手势结束 + - 根据movedX,确定index--/++or不动,并过渡翻页 + - 重启定时器 + - 数据重置(optional) + * */ + +function activeBanner() { + // 一. 自动无限轮播 + // 1.拿到标签 + var banner = document.getElementsByClassName('jd_banner')[0]; + var ul_imgbox = banner.getElementsByTagName('ul')[0]; + var ol_pagebox = banner.getElementsByTagName('ol')[0]; + var pages = ol_pagebox.getElementsByTagName('li'); + var li_array = ul_imgbox.getElementsByTagName('li'); + + // 2.获取常量和一些变量 + var bannerW = banner.offsetWidth; + var timer; + var duration = 1000; // 1000ms 也就是1s + var index = 1; // 由于显示的是第二张所以从下标为1的开始 + var curX = 0; + + // 3.设置过渡/ 移出过渡/ 水平方向位移 + // 3.1 设置过渡 + function setTransition() { + ul_imgbox.style.transition = 'all .2s ease'; + ul_imgbox.style.webkitTransition = 'all .2s ease'; + } + + // 3.2 移除过度 + function removeTransition() { + ul_imgbox.style.transition = 'none'; + ul_imgbox.style.webkitTransition = 'none'; + } + + // 3.3 设置水平方向位移 + function changeTranslateX(x) { + ul_imgbox.style.transform = 'translateX(' + x + 'px)'; + ul_imgbox.style.webkitTransform = 'translateX(' + x + 'px)'; + } + + // 4.用定时器实现自动滚动 + + // 4.1 直接开始定时器滚动 + timer = setInterval(scrollImg, duration); + function scrollImg() { + // 索引+1 + // console.log(index); + index ++; + + // 带过渡的移动 + curX = -index * bannerW; + setTransition(); + changeTranslateX(curX); + } + // 4.2 狸猫换太子 + + function keepIndexSafe() { + // 4.2.1若滚动到边界则进行index转移 + if(index >= li_array.length - 1){ + index = 1; + }else if (index <= 0){ + index = 8; + } + // 4.2.2非过渡位移 + curX = -index * bannerW; + removeTransition(); + changeTranslateX(curX); // 尽量不要使用 计算来代替参数 + // 4.2.3执行currentPage变化 + currentPageChange(); + } + ul_imgbox.addEventListener('transitionEnd', keepIndexSafe); + ul_imgbox.addEventListener('webkitTransitionEnd', keepIndexSafe); + + // 执行currentPage变化 + function currentPageChange() { + // 1.清除当前curpage + for (var i = 0; i < pages.length; i++){ + pages[i].className = ''; + } + // 2.给新的li赋值类名,来实现curPage + // pages内部元素的下标范围[0,7];index取值范围 [1,8] + var pageIndex = index - 1; + // 2.1 optional + if (pageIndex < 0) pageIndex = 0; + if (pageIndex > 7) pageIndex = 7; + + pages[pageIndex].className = 'current'; + } + + // 二.手势滑动 + var startX,movingX,changedX; + startX = 0; + movingX = 0; + changedX = 0; + // 1.手势开始 + ul_imgbox.addEventListener('touchstart', function (e) { + // 1.1 清除定时器 + clearInterval(timer); + // 1.2 记录开始x + startX = e.touches[0].clientX; + }) + // 2.手势开始移动 + ul_imgbox.addEventListener('touchmove', function (e) { + // 2.0 清除默认效果 + e.preventDefault(); + // 2.1 记录当前的movingX,并得到变化的changedX; + movingX = e.touches[0].clientX; + changedX = movingX - startX; + + // 2.2 让ul_imgbox跟随位移 + curX = -index * bannerW + changedX; + removeTransition(); // 进行无过渡位移 + changeTranslateX(curX); + + }) + // 3.手势结束 + ul_imgbox.addEventListener('touchend', function (e) { + // 3.1 根据changedX来判断,是否处于正好的显示一页,如果不是,就进行过渡动画 + if (changedX > bannerW * 0.49){ + index --; + }else if(changedX < -0.49 * bannerW){ + index ++; + }else{ + } + curX = -index * bannerW; + setTransition(); + changeTranslateX(curX); + + // 3.2 重启定时器 + timer = setInterval(scrollImg, duration); + + // 3.3 数据重置 + startX = 0; + movingX = 0; + changedX = 0; + }) +} + +/** + * 假设 每天3场抢购 0点场 8点场 16点场 + 当前处于 1.x点场 2.离下一场还剩多少时间 3.每秒展示一次 + + 11: 39 : 53 + 当前处于 8点场 + 距离16点场,剩余的时间 4:20:07 + + 11:00:00,剩余时间 5:00:00 + 11:01:00,剩余实际 4:59:00 + 11:01:01,剩余实际 4:58:59 + * */ +function seckillTimer() { + // 1.获取标签 + var box = document.getElementsByClassName('seckill_header_left')[0]; + var nth_seckill = box.getElementsByTagName('em')[0]; + // 去某一部分做修改,下标为1,3,4,6,7 + var spans = box.getElementsByTagName('span'); + + setInterval(function () { + // 2.拿到当前时间 + var now = new Date(); + // console.log(now, Date.now()); + var nowH = now.getHours(); + var nowM = now.getMinutes(); + var nowS = now.getSeconds(); + // console.log('h:', nowH, 'm:', nowM, 's:', nowS); + var nth = 0; + var leftH = 0; + var leftM = 0; + var leftS = 0; + + if (nowH > 0 && nowH < 8){ + nth = 0; + }else + { + // 处理0点到8点,其他的场次没隔n小数执行一次 + var n = 8; // 为了注释服务变量 + nth = Math.floor(nowH / n) * n; + } + // console.log(); + + + leftH = (nowM == 0 &&　nowS == 0) ? 8 - (nowH - nth): 7 - (nowH - nth); + leftM = (nowS == 0) ? 60 - nowM: 59 - nowM; + leftS = (nowS == 0) ? 0: 60 - nowS; + + // 3.展示 + nth_seckill.innerHTML = nth; + spans[1].innerHTML = leftH; + spans[3].innerHTML = Math.floor(leftM/10); + spans[4].innerHTML = leftM % 10; + spans[6].innerHTML = Math.floor(leftS/10); + spans[7].innerHTML = leftS % 10; + }, 1000); + + }