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

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

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

原理：

鼠标按下，获取当前鼠标坐标，作为起始坐标；

鼠标移动，获取坐标，与起始坐标进行一系列的数学运算；

给 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";

}

})();

}

}

效果图(动图不会哎)：

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

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

iOS仿今日头条滑动导航

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

vue 仿今日头条

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

vue2&period;0仿今日头条开源项目

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

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

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

&lbrack;Android&rsqb; Android 手机下 仿 今日头条 新闻客户端

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

Android 代码实现viewPager&plus;fragment 模仿今日头条的顶部导航

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

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

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

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

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

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

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

随机推荐

【知识积累】SBT&plus;Scala&plus;MySQL的Demo

一.背景 由于项目需要,需要在Sbt+Scala项目中连接MySQL数据库.由于之前使用Maven+Java进行依赖管理偏多,在Sbt+Scala方面也在不断进行摸索,特此记录,作为小模块知识的积累. ...

安装Cocoapods&lpar;Pods 管理iOS 第三方库)

安装 可先检测Mac电脑是否安装Pods.打开控制台: $ which pod 如果安装,结果如下;如果没有安装,控制台无反应. /usr/bin/pod 如果没有安装, 以下命令安装之. $ sud ...

C&plus;&plus;&colon;用成员初始化列表对数据成员初始化

1.在声明类时,对数据成员的初始化工作一般在构造函数中用赋值语句进行. 例如: class Complex{ private: double real; double imag; public: Co ...

MySQL改写子查询成Join

有时用别的方式而不是子查询可以获得更高的性能 : For example: SELECT * FROM t1 WHERE id IN (SELECT id FROM t2); 改写: SELECT D ...

js去除数组重复成员

js去除数组重复成员 第一种思路是:遍历要删除的数组arr, 把元素分别放入另一个数组tmp中,在判断该元素在arr中不存在才允许放入tmp中 用到两个函数:for ...in 和 indexOf() ...

运输层TCP&sol;UDP

UDP:用户数据报协议 客户不与服务器建立连接,它只管用函数sendto给服务器发送数据报,此函数要求目的地址(服务器)作为其参数.类似的,服务器不从客户接受连接,它只管调用函数recvfrom,等待 ...

&lbrack;BUG&rsqb;Appium1&period;9&period;1 这个问题竟然花了我5分钟进行定位

1.先上问题,知道是什么问题先 EE ====================================================================== ERROR: tes ...

python f-string

文章目录 1. 主要内容 1.1. 旧时代的格式化字符串 1.1.1. Option #1: %-formatting 1.1.2. 怎样使用 %-formatting 1.1.3. 为什么 %-fo ...

ldap集成nexus

nexus版本:2.14.4 添加nexus支持ldap认证: 管理员登录,点击 Administration --> Server -->Security Settings,将 OSS ...