# 仿京东移动端页面

**Repository Path**: jiangzetian/itheimaM

## Basic Information

- **Project Name**: 仿京东移动端页面
- **Description**: 此为本人大二下学期所写项目，此项目属于纯移动端页面，Html5+css3进行布局，原生Javascript实现逻辑交互。页面风格京东移动端页面
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://jiangzetian.gitee.io/itheimam
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-01
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
typora-root-url: ./
---

# 仿京东移动端页面

#### 介绍

本文作者：蒋泽天

码云首页：https://gitee.com/jiangzetian

此为本人大二下学期所写项目，此项目属于纯移动端页面，HTML5+CSS3进行布局，原生Javascript实现逻辑交互。页面风格京东移动端页面，页面总共三个页面，分别是首页，分类页，购物车页。

在线预览地址： http://jiangzetian.gitee.io/itheimam

本地预览方式：clone 至本地后，用浏览器打开index.html页面

#### 软件架构
HTML5

CSS3

Javascript


#### 安装教程

1. git clone 仓库地址
2. 浏览器打开index.html文件
3. 浏览器页面按F12 设置为移动端模式

#### 项目功能

> 首页页面向下滚动,搜索框透明度会动态变化，滑动过banner后，透明度为1。
>
> 首页页面banner图滚动，支持触屏交互。
>
> 首页页面抢购栏目会有倒计时效果。
>
> 购物车页面点击删除，会产生悬浮提示框，商品右下角垃圾桶盖子会打开。

#### 技术实现

1. **搜索框实现**

   html部分

   ```html
   <div class="hm_layput">
       <header class="hm_header">
           <div class="hm_header_box">
               <a href="#" class="icon_logo"></a>
               <form action="#">
                   <span class="icon_search"></span>
                   <input type="search" placeholder="请输入搜索信息">
               </form>
               <a href="" class="login">登录</a>
           </div>
       </header>
   </div>
   ```

   js部分两块，一部分是公共js，一部分是index中的js。（这里只贴了index.js中的）

   ```js
   window.onload=function () {
       search();
       banner();
       downTime();
   };
   //根据高度调整搜索栏透明度
   function search() {
       var searchBox=document.querySelector('.hm_header_box');
       var bannerBox=document.querySelector('.hm_banner');
       var h=bannerBox.offsetHeight;
       window.onscroll=function () {
           var top=document.body.scrollTop;
           var opacity=0;
           if (top<h){
               opacity=top/h*0.85;
           } else {
               opacity=0.85;
           }
           searchBox.style.background="rgba(201,21,35,"+opacity+")";
       };
   };
   ```

   css部分有两块，一部分是公共css，一部分是index中的css，这里就贴了。

2. **banner滚动**

   html部分

   ```html
   <div class="hm_banner">
       <ul class="clearfix">
           <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
           <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
       </ul>
       <ul>
           <li class="now"></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </div>
   ```

   js部分两块，一部分是公共js，一部分是index中的js。（这里只贴了index.js中的）

   ```js
   window.onload=function () {
       search();
       banner();
       downTime();
   };
   //滚动bannar
   function banner(){
       var banner=document.querySelector('.hm_banner');
       var w=banner.offsetWidth;
       var imageBox=banner.querySelector('ul:first-child');
       var pointBox=banner.querySelector('ul:last-child');
       var points=pointBox.querySelectorAll('li');
       //添加过度
       var addTransition=function(){
           imageBox.style.webkitTransition="all .2s";
           imageBox.style.transition="all .2s";
       };
       //删除过度
       var removeTransition=function () {
           imageBox.style.webkitTransition="none";
           imageBox.style.transition="none";
       }
       //改变位子
       var setTranslateX=function (translateX) {
           imageBox.style.webkitTransform="translateX("+translateX+"px)";
           imageBox.style.transform="translateX("+translateX+"px)";
       };
       //自动滚动一秒一次
       var index=1;
       var timer = setInterval(function () {
           index++;
           addTransition();
           setTranslateX(-index*w);
       },1000);
       //加入过度事件
       itcast.transitionEnd(imageBox,function () {
   /*        console.log('transitionEnd');*/
           if (index >= 9){
               index=1;
               removeTransition();
               setTranslateX(-index*w);
           } else if(index<=0){
               index=8;
               removeTransition();
               setTranslateX(-index*w);
           }
           setPoint();
       });
       //点的滚动
       var setPoint=function () {
           for (var i=0; i<points.length;i++){
               points[i].className="";
           }
           points[index-1].className="now";
       }
       //图片滑动
       var startX=0;
       var moveX=0;
       var distanceX=0;
       var isMove=false;
   
       imageBox.addEventListener('touchstart',function (e) {
           clearInterval(timer);
           startX=e.touches[0].clientX;
       });
       //滑动距离
       imageBox.addEventListener('touchmove',function (e) {
           isMove=true;
           moveX=e.touches[0].clientX;
           distanceX=moveX-startX;
           var currX=-index*w+distanceX;
           removeTransition();
           setTranslateX(currX);
       });
       //判断是否翻页
       imageBox.addEventListener('touchend',function (e) {
           if(isMove && (Math.abs(distanceX)>w/3)){
               if(distanceX>0){
                   index--;
               }else {
                   index++;
               }
               addTransition();
               setTranslateX(-index*w);
           }
           //添加回定时器
           startX=0;
           moveX=0;
           distanceX=0;
           isMove=false;
           clearInterval(timer);
           timer = setInterval(function () {
               index++;
               addTransition();
               setTranslateX(-index*w);
           },1000);
       });
   }
   ```

   css部分有两块，一部分是公共css，一部分是index中的css，这里就贴了。

3. **抢购栏目倒计时效果**

   html部分

   ```html
   <div class="f_left m_110">
       <span class="sk_icon"></span>
       <span class="sk_name m_100">掌上秒杀</span>
       <div class="sk_time m_100">
           <span>0</span>
           <span>0</span>
           <span>:</span>
           <span>0</span>
           <span>0</span>
           <span>:</span>
           <span>0</span>
           <span>0</span>
       </div>
   </div>     
   ```

   js部分两块，一部分是公共js，一部分是index中的js。（这里只贴了index.js中的）

   ```js
   //倒计时
   function downTime() {
       var time=5*60*60;
       var timer=null;
       var skTime=document.querySelector('.sk_time');
       var spans=skTime.querySelectorAll('span');
       timer=setInterval(function () {
           if (time<0){
               clearInterval(timer);
               return false;
           }
           time--;
           var h=Math.floor(time/3600);
           var m=Math.floor(time%3600/60);
           var s=time%60;
           console.log(h+':'+m+':'+s);
           spans[0].innerHTML=Math.floor(h/10);
           spans[1].innerHTML=h%10;
           spans[3].innerHTML=Math.floor(m/10);
           spans[4].innerHTML=m%10;
           spans[6].innerHTML=Math.floor(s/10);
           spans[7].innerHTML=s%10;
       },1000);
   }
   ```

   css部分有两块，一部分是公共css，一部分是index中的css，这里就贴了。

4. **购物车页面点击删除产生悬浮提示框，小垃圾桶会打开盖子**

   html

   ```html
   <div class="hm_product">
               <div class="hm_product_left">
                   <a href="" class="hm_check_box" checked></a>
               </div>
               <div class="hm_product_right">
                   <a href="" class="product_img">
                       <img src="images/detail01.jpg" alt="">
                   </a>
                   <div class="product_info">
                       <a href="" class="name">
                           华为（HUAWEI）荣耀平板优享版wifi 8 英寸平板电脑（高通骁龙64位四核处理器 1280*800 2G/16G 4800mAh)香槟金
                       </a>
                       <p class="price">&yen;1000</p>
                       <div class="option">
                           <div class="f_left">
                               <span>-</span>
                               <input type="tel">
                               <span>+</span>
                           </div>
                           <div class="f_right deleteBox" id="bt1">
                               <span class="up"></span>
                               <span class="down"></span>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
   ```

   js部分两块，一部分是公共js，一部分是index中的js。（这里只贴了cart.js中的）

   ```js
   //动画弹框
   window.onload=function () {
       var hmWin=document.querySelector('.hm_win');
       var hmWinbox=hmWin.querySelector('.hm_win_box');
       var deleteList=document.querySelectorAll('.deleteBox');
       var deleteBtn=null;
       for (var i=0;i<deleteList.length;i++){
           deleteList[i].onclick=function () {
               hmWin.style.display="block";
               deleteBtn=this;
               var up=deleteBtn.querySelector('.up');
               up.style.webkitTransition="all 1s";
               up.style.transition="all 1s";
               up.style.webkitTransformOrigin="0 5px";
               up.transformOrigin="0 5px";
               up.style.webkitTransform="rotate(-30deg) translateY(2px)";
               up.style.transform="rotate(-30deg) translateY(2px)";
           }
       }
       //点击取消按钮
       hmWinbox.querySelector('.cancel').onclick=function () {
           hmWin.style.display="none";
           hmWinbox.classList.remove('bounceInDown');
           if(deleteBtn){
               var up=deleteBtn.querySelector('.up');
               up.style.webkitTransform="none";
               up.transform="none";
           }
       };
   };
   ```

   

#### 项目图片预览

![](md_img/首页长图.jpg)

![](md_img/分类页.jpg)

![购物车页](md_img/购物车页.jpg)

![购物车页_提示框](md_img/购物车页_提示框.jpg)

*谢谢支持 蒋泽天著*