咳咳!先打一波小广告,在上一篇里忘记了,那啥……我的那个个人博客做好了-->(我的博客)<--。嘿嘿

好嘞,言归正传,说说我们的效果。

其实就是实现横向滑动,进行选择。

原理:

  • 鼠标按下,获取当前鼠标坐标,作为起始坐标;
  • 鼠标移动,获取坐标,与起始坐标进行一系列的数学运算;
  • 给 left 赋值,改变位置;
  • 移动过多,超过时进行处理。
function scrollTabX() {
let nav = document.getElementById("nav");
let navs = document.getElementsByTagName("li");
let navbar = document.getElementsByClassName("navbar")[0];
let left = nav.style.left; // ul 距离左边的距离
let totalWidth = 0; // 总宽度
let minusValue = 0; // 设备宽度与总宽度的差值 left = left ? left : 0; // 初始时 ul 距离左边 0px
// 获取所有 li 所占用的宽度
for (let i = 0; i < navs.length; i++) totalWidth += navs[i].offsetWidth;
// 固定 ul 的宽度
nav.style.width = totalWidth + 'px';
minusValue = window.screen.width - totalWidth; // 当设备宽度小于 ul 宽度的时候,执行水平滚动
if (minusValue < 0) {
(function () {
nav.onmousedown = function (ev) {
let e = ev || event;
// 获取鼠标的位置信息
let startX = e.screenX;
nav.onmousemove = function (e) {
left += (e.screenX - startX) / 10;
nav.style.left = left + 'px';
}
}
nav.onmouseup = function () {
nav.onmousemove = null;
// 拉多了,要回来呢,兄弟
if (left > 0) {
let timer = setInterval(function () {
left -= 50;
if (left <= 0) {
left = 0;
clearInterval(timer);
}
nav.style.left = left + 'px';
}, 20);
}
if (left < minusValue) {
let timer = setInterval(function () {
left += 50;
if (left >= minusValue) {
left = minusValue - 10; // 有个 10px 的 padding
clearInterval(timer);
}
nav.style.left = left + 'px';
}, 20);
}
// 去掉阴影
navbar.style.boxShadow = (left <= minusValue) ? "0 0 0 #fff" : "-5px 0 10px #fff inset";
}
})();
}
}

效果图(动图不会哎):

反正想像一下效果就好了,哈哈。

至于说这篇写的不怎么样,我为什么还要置顶?……当然是因为我的博客啦!

仿今日头条横向滚动导航栏--原生js的更多相关文章

  1. iOS仿今日头条滑动导航

    之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...

  2. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  3. vue2.0仿今日头条开源项目

    vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...

  4. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码

    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...

  5. [Android] Android 手机下 仿 今日头条 新闻客户端

    利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个  仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...

  6. Android 代码实现viewPager+fragment 模仿今日头条的顶部导航

    模仿今日头条的顶部导航:    下载地址: http://download.csdn.net/detail/u014608640/9917700 效果图:

  7. Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)

    前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...

  8. html实现滚动播报(原生JS实现)

    html实现滚动播报(原生JS实现) 废话不多说,先看一个简单的滚动效果(鼠标放上去的时候可以暂停滚动,谷歌版本 66.0.3359.139(正式版本)查看时会出现滚动混乱.单独提出来的时候不会,应该 ...

  9. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

随机推荐

  1. threading 多线程使用

    实例 1import threading #线程import time def Say(n): print('Test %d' %n) time.sleep(2) if __name__ == '__ ...

  2. 用python优雅打开文件及上下文管理协议

    有次面试被问到如何优雅地打开一个文件?   那就是用with语句,调用过后可以自动关闭.   但是为什么使用with语句就可以自动关闭呢,原因就是上下文管理协议.   上下文管理协议:包含方法 __e ...

  3. Android TextView 跑马灯效果 - 2018年6月19日

    第一步在布局中添加加粗部分代码: <TextView android:id="@+id/tv_company" android:layout_width="0dp& ...

  4. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  5. 《深入理解JAVA虚拟机》----------第二章 JAVA内存区域与内存溢出异常,笔记(下)

    2. HotSpot虚拟机对象探秘 2.1 对象的创建 虚拟机遇到一条New指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初 ...

  6. Vue watch的高级用法

    <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...

  7. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  8. [leetcode]244. Shortest Word Distance II最短单词距离(允许连环call)

    Design a class which receives a list of words in the constructor, and implements a method that takes ...

  9. Linux系统minicom命令详解

    minicom 功能说明:调制解调器通信程序 语 法:minicom [-8lmMostz][-a<on或0ff>][-c<on或off>][-C<取文件>][-d ...

  10. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...