聚划算导航栏的反弹效果代码纯原生js实现

一.首先是HTML代码: 记得在头部加一个移动端的视口

<header><div class="logo">聚划算</div><div class="nav"><div id="nuit"><ul><li><a href="#">购物1</a></li><li><a href="#">购物2</a></li><li><a href="#">购物3</a></li><li><a href="#">购物4</a></li><li><a href="#">购物5</a></li><li><a href="#">购物6</a></li><li><a href="#">购物7</a></li></ul></div></div><div class="btn">按钮</div>
</header>

二:接下来是CSS代码很简单大家都能看懂都是基本的低吗了

*{margin:0;padding: 0;
}
hearder{background: #ccc;height: 45px;width: 100%;position: relative;
}
header .logo{position: absolute;top:0;left: 0;width: 100px;height: 45px;background: pink;z-index: 999;text-align: center;line-height: 40px;font-size: 25px;
}
header .btn{position: absolute;top:0;right: 0;width:100px;height: 45px;background: pink;z-index: 999;
}
header .nav{padding: 0 60px 0 100px;width: 100%;height: 45px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}
#nuit{width: 100%;height: 45px;position: relative;background: #f00;
}
#nuit ul{list-style:none;height: 45px;padding-left: 10px;position: absolute;
}
#nuit ul li{float:left;width: 60px;height: 45px;text-align: center;margin-left: 10px;line-height: 40px;
}
#nuit ul li a{text-decoration: none;color:white;
}
.btn{text-align: center;line-height: 40px;
}

三.最后就是JS代码了: 这是最核心的看不懂的每一行都有注释

var box = document.querySelector('#unit')
var ul = document.querySelector('ul')
var nav = document.querySelector('.nav')
//屏幕宽度
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
//ul的真实宽度
var allWidth = ul.children.length * 70;
ul.style.width = allWidth +'px';
//反弹值
var min = allWidth - (windowWidth - 100 - 60);
var deltaX;
//信号量
var nowX = 100;
//移动数组,用于计算手指抬起时的瞬时速度
var moveAll = [];
ul.addEventListener('touchstart',function (event) {event.preventDefault();//去掉过度
    ul.style.transition = 'none';//记录偏差值 手指在滑块上的位置距离滑块左边的距离
    deltaX = event.touches[0].clientX - nowX;
},false);
ul.addEventListener('touchmove',function (event) {event.preventDefault();//改变信号量
    nowX = event.touches[0].clientX - deltaX;//动起来
    ul.style.left = nowX + 'px';//将每次移动触发的位置添加到moveArr数组中
    moveAll.push(event.touches[0].clientX);},false);
ul.addEventListener('touchend',function (event) {event.propertyIsEnumerable();//计算moveAll中最后两个坐标间的距离
    var end = moveAll.length - 1;var s = moveAll[end] - moveAll[end - 2];// s这个距离决定了结束时的瞬时速度,根据s计算一个新的惯性数值
    var target = nowX + s * 5;if (target < -min){target = -min;} else if (target > 0) {target = 0;}ul.style.transition = 'all 0.4s';ul.style.transition = 'all 0.4s cubic-bezier(.1,.92,.31,2.01) 0s';//过度实现最终移动
    ul.style.left = target + 'px';//改变信号量
    nowX = target;
});

最后的效果大概是这个效果看的不太懂得可以访问聚划算的官网看看人家原来的效果!!!

聚划算导航栏的反弹效果代码纯原生js实现相关推荐

html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
底部导航栏的凸起效果
微信小程序开发教程.开发教学本视频为1-1号视频,做出了底部导航栏的凸起效果第一次做视频,希望大家多多支持- 组件源码+项目源码: 链接:https://pan.baidu.com/s/1EkZx ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍纯原生js 实现且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍纯原生js 实现且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...

聚划算导航栏的反弹效果代码纯原生js实现

聚划算导航栏的反弹效果代码纯原生js实现相关推荐

最新文章

热门文章

聚划算导航栏的反弹效果代码 纯原生js实现

聚划算导航栏的反弹效果代码 纯原生js实现相关推荐

最新文章

热门文章

聚划算导航栏的反弹效果代码纯原生js实现

聚划算导航栏的反弹效果代码纯原生js实现相关推荐