原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）

效果图：

点击导航栏左右拖动

代码：

CSS：

<style>.navBar {width: 1200px;margin-left: 25px;margin-top: 40px;margin-bottom: 40px;overflow-x: auto;white-space: nowrap;}/* 去除底部滚动条 */.navBar::-webkit-scrollbar {display: none;}li {display: inline-table;height: 50px;line-height: 50px;padding-left: 35px;padding-right: 35px;margin-right: 12.5px;border-radius: 10px;background: #EEEEEE;font-family: " PingFangSC-Regular";font-size: 30px;color: #333333;text-align: center;width: 300px;}
</style>

HTML

<body><ul class="navBar" id="nav"><li>拖动1</li><li>拖动2</li><li>拖动3</li><li>拖动4</li><li>拖动5</li><li>拖动6</li><li>拖动7</li><li>拖动8</li><li>拖动9</li><li>拖动10</li></ul>
</body>

JS：

<script>var flag; // 鼠标按下var downX; // 鼠标点击的x下标var scrollLeft; // 当前元素滚动条的偏移量nav.addEventListener("mousedown", function (event) {flag = true;downX = event.clientX; // 获取到点击的x下标scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量});nav.addEventListener("mousemove", function (event) {if (flag) { // 判断是否是鼠标按下滚动元素区域// 获取移动的x轴var moveX = event.clientX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离var scrollX = moveX - downX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离this.scrollLeft = scrollLeft - scrollX;console.log(scrollX)}});// 鼠标抬起停止拖动nav.addEventListener("mouseup", function () {flag = false;});// 鼠标离开元素停止拖动nav.addEventListener("mouseleave", function (event) {flag = false;});</script>

原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）相关推荐

JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）
效果 <style>.navBar {width: 1200px;margin-left: 25px;margin-top: 40px;margin-bottom: 40px;overfl ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
html中点击导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
html鼠标滑过导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
js实现网页左侧导航条,鼠标经过显示隐藏的面板
js实现网页左侧导航条,鼠标经过显示隐藏的面板 <style>* {margin: 0;padding: 0;}#left_nav {position: relative;border: ...
css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏需要达到的效果: 默认首页选中样式设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化所涉及的知识点: 布局:float css: 元素状态切换(displ ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
jq导航栏点击滚动到对应位置导航栏随页面滑动变化对应导航颜色
需要做个手机站,顶端有导航栏,点击导航栏页面滑到相应位置,并且滑动页面,导航栏也随之变化.由于不大会js,只能网上找了些代码,但是都不完全适用,就自己改造了一番,写的比较粗糙,但是对初学者来说,算是比 ...

原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）

效果图：

代码：

原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）相关推荐

最新文章

热门文章