m.jd.com首页中的js效果

m.jd.com中的部分js效果

昨天把m.jd.com的首页布局写好了，今天写一下首页中部分js效果。头部背景色透明度的改变，焦点图轮播，京东快报的小轮播，以及秒杀倒计时。这里html,css样式就不在赘述，有需要的可以看一下我昨天写好的样式。

在这里，我就把三段js代码分开来写，方便阅读。

1.头部背景色透明度改变

 //找出头部对象
         var jd_header = document.querySelector('.jd_header');
         var scroll_news = document.querySelector('.scroll_news');
         var scroll_list = scroll_news.querySelectorAll('li');

         //注册window下的滚动事件，获取滚高度
         window.addEventListener('scroll', function () {
             var _scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
 //头部背景色在一定条件下透明度改变
 //当滚动高度大于600时，透明度设置为1
             if(_scrollTop > 600){
                 jd_header.style.backgroundColor = 'rgba(209,56,68,1)';
             }else{
 //滚动条在600以下，透明度为滚动高度/条件高度，设置不同透明度
                 jd_header.style.backgroundColor = 'rgba(209,56,68,'+_scrollTop/600+')';
             }
         });

2.焦点图轮播

通常轮播图js中使用方法是使用ul包裹着li,并且让ul滚动。可是这种方法在移动端会出现一些问题，因此，在这里提供一种仅供参考的另一种方法。

首先确定了三个位置，分别为左，中，右。位置分别是负的一屏的宽度（左），0 0 的起始点（中，就是屏幕可视位置），正的一屏位置（右）。初始化定义为left,center,right.在位置中存放下标，只需要让下表产生轮转，当下标改变，图片被替换，再让left,center,right位置图片发生归位操作

 //获取焦点图轮播需要的对象
 var course = document.querySelector('.course');
 var course_wrap = course.querySelector('.course_wrap');
 var course_list = course_wrap.querySelectorAll('li');
 var screenWidth = document.documentElement.offsetWidth;
 //将li的高度赋给ul,撑起盒子高度
 course_wrap.style.height = course_list[0].offsetHeight+'px';
 var points_wrap = course.querySelector('.points_wrap');

 //首先自动生成轮播图中的小圆点
 //根据li的数量自动生成小圆点，追加到points_wrap
  for(var i=0;i < course_list.length;i++){
       var li = document.createElement('li');
       if(i == 0){
           li.classList.add('active');
     }
           points_wrap.appendChild(li);
 }   

 //初始化轮播图需要的位置图
 var left,right,center;
 center = 0;
 right = 1;
 left = course_list.length-1;

 //首先让最开始的图片就位
 ourse_list[center].style.webkitTransform = 'translateX(0px)';
 course_list[left].style.webkitTransform = 'translateX('+-screenWidth+'px)';
 course_list[right].style.webkitTransform = 'translateX('+screenWidth+'px)';
 window.addEventListener('resize',function(){
     screenWidth = document.documentElement.offsetWidth;
     //  获取LI的高度赋值给ul
     course_wrap.style.height = course_list[0].offsetHeight +'px';
 })

 var carourTimer = setInterval(function(){
     // 看到下一张的逻辑
     nextPic();
 }, 1000);

 /*
 滑动设置图片位置
     （1）获得手指的滑动距离
     （2）直接让获得的距离和默认的位置相加
     （3）在滑动结束后去判断有没有滑动成功，如果滑动成功则看到下一张或者上一张，没有成功，返回当前原点
  */
 course.addEventListener('touchstart',touchstartHandler);
 course.addEventListener('touchmove',touchmoveHandler);
 course.addEventListener('touchend',touchendHandler);
 var startX = 0,startTime,dx = 0;
 function touchstartHandler(e){
     // 获取手指的X坐标
     startX = e.touches[0].pageX;
     // 获取手指滑动开始的时间
     startTime = new Date();
     //　停止定时器
     clearInterval(carourTimer);
     // 清除过渡
     setTransition(false,false,false);
 };
 function touchmoveHandler(e){
     // 获取滑动的距离
     dx = e.touches[0].pageX - startX;

     // 重置去设置li的位置
     setTranslateX(dx);
 };
 function touchendHandler(e){
     var t = new Date() - startTime;
     // 在结束的时候重新获取滑动的距离
     var dx = e.changedTouches[0].pageX - startX
     // 当dx为一个大于屏幕1/3的值的时候或者滑动的时间小于500毫秒滑动的区间大于30像素，则判定滑动成功，需要看到上一张
     // 当dx为一个小于-屏幕1/3的值的时候或者滑动的时间小于500毫秒滑动的区间大于30像素，则判定滑动成功，需要看到下一张
     if(dx < -(screenWidth/3) || (t < 500 && dx < -30)){
         nextPic();
     }else if(dx > screenWidth/3 ||  (t < 500 && dx > 30)){
         prevPic();
     }else{
         // 添加过渡
         setTransition(true,true,true);
         // 回归原位
         setTranslateX();
     }
     // 重新启动定时器
     carourTimer = setInterval(function(){
         // 看到下一张的逻辑
         nextPic();
     }, 1000);
 };

 //封装下一张图片的逻辑
 function nextPic(){
 //让图片轮转
    left = center;
    center = right;
    right++;

 //极值判断
 if(right > course_list.length-1){
      right = 0;
 }
 //添加过渡
 //而在图片的三个位置中，right属于替补图片，所以不需要添加过渡
 setTransition(true,true,false);
 //真正的轮转，让图片和下标对应起来
 setTranslateX();
 //设置小圆点
 setPoints();

 }
 // 封装上一张图片的逻辑
 function prevPic(){
     // 轮转
     right = center;
     center = left;
     left --;
     // 极值判断
     if(left < 0){
         left = course_list.length - 1;
     }
     // 添加过渡
     // 因为left是替补的图片，所以不需要添加过渡
     setTransition(false,true,true);
     // 真正的轮转
     setTranslateX();
     // 设置小圆点
     setPoints();
 }

 //封装小圆点
 //注意事项，小圆点的获取一定要在创建的后面，否则获取不到
 var points = points_wrap.querySelectorAll('li');
 function setPoints(){
 //排他思想
     for(var i=0;i < course_list.length;i++){
             points[i].classList.remove('active');
     }
         points[center].classList.add('active');
 }

 //封装过渡的设置
 function setTransition(a,b,c){
     if(a){
         course_list[left].classList.add('transitionAll');
     }else{
         course_list[left].classList.remove('transitionAll');
     }
     if(b){
         course_list[center].classList.add('transitionAll');
     }else{
         course_list[center].classList.remove('transitionAll');
     }
     if(c){
         course_list[right].classList.add('transitionAll');
     }else{
         course_list[right].classList.remove('transitionAll');
     }
 }

 // 封装移动
 function setTranslateX(dx){
     dx = dx || 0;
     course_list[center].style.webkitTransform = 'translateX('+ (0 + dx) +'px)';
     course_list[left].style.webkitTransform = 'translateX('+ (-screenWidth + dx)+'px)';
     course_list[right].style.webkitTransform = 'translateX('+(screenWidth + dx) +'px)';
 }

3.秒杀倒计时

 //其实倒计时是需要后台返回给你一个时间戳，因为前台的时间不安全，在这里，我就使用js来实现简单倒计时效果

 // 拿到当前时间
 var nowTime = new Date();
 // 拿到未来时间
 var newTime = new Date('Nov 17 2016 18:20:36');
 // 将获取到的时间转换成秒
 var t = Math.floor((newTime - nowTime)/1000);
 //获取元素
 var span = document.querySelectorAll('.count_wrap span');
 var countTime = setInterval(function(){
     t--;
     if(t < 0){
         clearInterval(countTime);
     }
     // 将所有的描述转换成小时 分钟 秒的公式
     var h = Math.floor(t%86400/3600);
     var m = Math.floor(t%3600/60);
     var s = Math.floor(t%60);
     // 拿到对应位数上的值
     span[0].innerHTML = Math.floor(h/10);
     span[1].innerHTML = Math.floor(h%10);
     span[3].innerHTML = Math.floor(m/10);
     span[4].innerHTML = Math.floor(m%10);
     span[6].innerHTML = Math.floor(s/10);
     span[7].innerHTML = Math.floor(s%10);

 }, 1000);

好了，这就是三个简单的js效果。其实这部分的js代码可以在封装，有兴趣的可以尝试一下