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

Posted 2020-08-20

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

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

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

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

 1 //找出头部对象
 2         var jd_header = document.querySelector(‘.jd_header‘);
 3         var scroll_news = document.querySelector(‘.scroll_news‘);
 4         var scroll_list = scroll_news.querySelectorAll(‘li‘);
 5 
 6 
 7         //注册window下的滚动事件，获取滚高度
 8         window.addEventListener(‘scroll‘, function () {
 9             var _scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
10 //头部背景色在一定条件下透明度改变
11 //当滚动高度大于600时，透明度设置为1
12             if(_scrollTop > 600){
13                 jd_header.style.backgroundColor = ‘rgba(209,56,68,1)‘;
14             }else{
15 //滚动条在600以下，透明度为滚动高度/条件高度，设置不同透明度
16                 jd_header.style.backgroundColor = ‘rgba(209,56,68,‘+_scrollTop/600+‘)‘;
17             }
18         });

 

2.焦点图轮播

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

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

  1 //获取焦点图轮播需要的对象
  2 var course = document.querySelector(‘.course‘);
  3 var course_wrap = course.querySelector(‘.course_wrap‘);
  4 var course_list = course_wrap.querySelectorAll(‘li‘);
  5 var screenWidth = document.documentElement.offsetWidth;
  6 //将li的高度赋给ul,撑起盒子高度
  7 course_wrap.style.height = course_list[0].offsetHeight+‘px‘;
  8 var points_wrap = course.querySelector(‘.points_wrap‘);
  9 
 10 //首先自动生成轮播图中的小圆点
 11 //根据li的数量自动生成小圆点，追加到points_wrap
 12  for(var i=0;i < course_list.length;i++){
 13       var li = document.createElement(‘li‘);
 14       if(i == 0){
 15           li.classList.add(‘active‘);      
 16     }
 17           points_wrap.appendChild(li);
 18 }   
 19 
 20 //初始化轮播图需要的位置图
 21 var left,right,center;
 22 center = 0;
 23 right = 1;
 24 left = course_list.length-1;
 25 
 26 //首先让最开始的图片就位
 27 ourse_list[center].style.webkitTransform = ‘translateX(0px)‘;
 28 course_list[left].style.webkitTransform = ‘translateX(‘+-screenWidth+‘px)‘;
 29 course_list[right].style.webkitTransform = ‘translateX(‘+screenWidth+‘px)‘;
 30 window.addEventListener(‘resize‘,function(){
 31     screenWidth = document.documentElement.offsetWidth;
 32     //  获取LI的高度赋值给ul 
 33     course_wrap.style.height = course_list[0].offsetHeight +‘px‘;
 34 })
 35 
 36 var carourTimer = setInterval(function(){
 37     // 看到下一张的逻辑
 38     nextPic();
 39 }, 1000);
 40 
 41 /*
 42 滑动设置图片位置
 43     （1）获得手指的滑动距离
 44     （2）直接让获得的距离和默认的位置相加
 45     （3）在滑动结束后去判断有没有滑动成功，如果滑动成功则看到下一张或者上一张，没有成功，返回当前原点
 46  */
 47 course.addEventListener(‘touchstart‘,touchstartHandler);
 48 course.addEventListener(‘touchmove‘,touchmoveHandler);
 49 course.addEventListener(‘touchend‘,touchendHandler);
 50 var startX = 0,startTime,dx = 0;
 51 function touchstartHandler(e){
 52     // 获取手指的X坐标
 53     startX = e.touches[0].pageX;
 54     // 获取手指滑动开始的时间
 55     startTime = new Date();
 56     //　停止定时器
 57     clearInterval(carourTimer);
 58     // 清除过渡
 59     setTransition(false,false,false);
 60 };
 61 function touchmoveHandler(e){
 62     // 获取滑动的距离
 63     dx = e.touches[0].pageX - startX;
 64 
 65     // 重置去设置li的位置
 66     setTranslateX(dx);
 67 };
 68 function touchendHandler(e){
 69     var t = new Date() - startTime;
 70     // 在结束的时候重新获取滑动的距离
 71     var dx = e.changedTouches[0].pageX - startX
 72     // 当dx为一个大于屏幕1/3的值的时候或者滑动的时间小于500毫秒滑动的区间大于30像素，则判定滑动成功，需要看到上一张 
 73     // 当dx为一个小于-屏幕1/3的值的时候或者滑动的时间小于500毫秒滑动的区间大于30像素，则判定滑动成功，需要看到下一张
 74     if(dx < -(screenWidth/3) || (t < 500 && dx < -30)){
 75         nextPic();
 76     }else if(dx > screenWidth/3 ||  (t < 500 && dx > 30)){
 77         prevPic();
 78     }else{
 79         // 添加过渡
 80         setTransition(true,true,true);
 81         // 回归原位
 82         setTranslateX();
 83     }
 84     // 重新启动定时器
 85     carourTimer = setInterval(function(){
 86         // 看到下一张的逻辑
 87         nextPic();
 88     }, 1000);
 89 };
 90 
 91 
 92 //封装下一张图片的逻辑
 93 function nextPic(){
 94 //让图片轮转
 95    left = center;
 96    center = right;
 97    right++;
 98 
 99 //极值判断
100 if(right > course_list.length-1){
101      right = 0;
102 }
103 //添加过渡
104 //而在图片的三个位置中，right属于替补图片，所以不需要添加过渡
105 setTransition(true,true,false);
106 //真正的轮转，让图片和下标对应起来
107 setTranslateX();
108 //设置小圆点
109 setPoints();
110 
111 }
112 // 封装上一张图片的逻辑
113 function prevPic(){
114     // 轮转
115     right = center;
116     center = left;
117     left --;
118     // 极值判断
119     if(left < 0){
120         left = course_list.length - 1;
121     }
122     // 添加过渡
123     // 因为left是替补的图片，所以不需要添加过渡
124     setTransition(false,true,true);
125     // 真正的轮转
126     setTranslateX();
127     // 设置小圆点
128     setPoints();
129 }
130 
131 //封装小圆点
132 //注意事项，小圆点的获取一定要在创建的后面，否则获取不到
133 var points = points_wrap.querySelectorAll(‘li‘);
134 function setPoints(){
135 //排他思想
136     for(var i=0;i < course_list.length;i++){
137             points[i].classList.remove(‘active‘);
138     }
139         points[center].classList.add(‘active‘);
140 }
141 
142 //封装过渡的设置
143 function setTransition(a,b,c){
144     if(a){
145         course_list[left].classList.add(‘transitionAll‘);
146     }else{
147         course_list[left].classList.remove(‘transitionAll‘);
148     }
149     if(b){
150         course_list[center].classList.add(‘transitionAll‘);
151     }else{
152         course_list[center].classList.remove(‘transitionAll‘);
153     }
154     if(c){
155         course_list[right].classList.add(‘transitionAll‘);
156     }else{
157         course_list[right].classList.remove(‘transitionAll‘);
158     }
159 }
160 
161 // 封装移动
162 function setTranslateX(dx){
163     dx = dx || 0;
164     course_list[center].style.webkitTransform = ‘translateX(‘+ (0 + dx) +‘px)‘;
165     course_list[left].style.webkitTransform = ‘translateX(‘+ (-screenWidth + dx)+‘px)‘;
166     course_list[right].style.webkitTransform = ‘translateX(‘+(screenWidth + dx) +‘px)‘;
167 }
168 
169 
170 
171 
172 
173 
174 
175 
176  

 

3.秒杀倒计时

 1 //其实倒计时是需要后台返回给你一个时间戳，因为前台的时间不安全，在这里，我就使用js来实现简单倒计时效果
 2 
 3 // 拿到当前时间
 4 var nowTime = new Date();
 5 // 拿到未来时间
 6 var newTime = new Date(‘Nov 17 2016 18:20:36‘);
 7 // 将获取到的时间转换成秒
 8 var t = Math.floor((newTime - nowTime)/1000);
 9 //获取元素
10 var span = document.querySelectorAll(‘.count_wrap span‘);
11 var countTime = setInterval(function(){
12     t--;
13     if(t < 0){
14         clearInterval(countTime);    
15     }
16     // 将所有的描述转换成小时 分钟 秒的公式
17     var h = Math.floor(t%86400/3600);
18     var m = Math.floor(t%3600/60);
19     var s = Math.floor(t%60);
20     // 拿到对应位数上的值
21     span[0].innerHTML = Math.floor(h/10);
22     span[1].innerHTML = Math.floor(h%10);
23     span[3].innerHTML = Math.floor(m/10);
24     span[4].innerHTML = Math.floor(m%10);
25     span[6].innerHTML = Math.floor(s/10);
26     span[7].innerHTML = Math.floor(s%10);
27 
28 }, 1000);

 

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