JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<script src="node_modules/jquery/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.navScroll{
position: relative;
}
#overflow{
width: 100%;
height: 30px;
overflow-x: scroll;
}
#overflow .container{
height: 30px;
}
#overflow .container div{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
#overflow::-webkit-scrollbar {
display: none;
-webkit-overflow-scrolling: touch;
}
.navScroll .drop_down{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 30px;
}
.navScroll .drop_down img{
width: 100%;
height: 100%;
}
.tabUl.clearFix{
display: none;
width: 100%;
list-style: none;
z-index: 10;
background: rgba(0,0,0,.1);
}
.tabUl li{
float: left;
width: 6.25rem;
height: 2.65625rem;
line-height: 2.65625rem;;
text-align: center;
}
.clearFix{
content: "";
display: table;
clear: both;
}
div, ul{
color: #89CFE8;
}
#overflow .container div.lastWidth{
width: 50px;
}
.red{
color: #FF9933;
}
</style>
</head>
<body>
<div class="navScroll">
<div id="overflow">
<div class="container">
<div class="tabItem red">
item1
</div>
<div class="tabItem">
item2
</div>
<div class="tabItem">
item3
</div>
<div class="tabItem">
item4
</div>
<div class="tabItem">
item5
</div>
<div class="tabItem">
item6
</div>
<div class="tabItem">
item7
</div>
<div class="tabItem">
item8
</div>
<div class="tabItem">
item9
</div>
<div class="tabItem">
item10
</div>
<div class="tabItem">
item11
</div>
<div class="lastWidth"></div>
</div>
</div>
<div class="drop_down">
<img src="img/icon_events_fold.png" drop="down" alt="" />
</div>
<ul class="tabUl clearFix">
<li class="red">item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li >item5</li>
<li >item6</li>
<li >item7</li>
<li >item8</li>
<li >item9</li>
<li >item10</li>
<li >item11</li>
</ul>
</div>
</body>
<script>
var width = 0;
$('#overflow .container div').each(function () {
width += $(this).outerWidth(true);
});
$('#overflow .container').css('width', width + "px");
var flag = true;
$(".drop_down img").click(function(e){ //箭头符号的变化
if(flag){
$(".drop_down img").attr("src","img/icon_events_unfold.png");
$(".tabUl").css("display","block")
flag = false;
}else{
$(".drop_down img").attr("src","img/icon_events_fold.png");
$(".tabUl").css("display","none")
flag = true;
}
});
var ulHeight= Math.ceil(($(".tabUl li").length-1)/6)*2.65625 +"rem";
$(".navScroll .tabUl").css("height",ulHeight)
$(".navScroll").on("click",".tabItem",function(e,index){ //滑动栏点击样式
var $this=$(this);
$(".tabItem").css({"color": "#89CFE8"})
$($this).css({"color": "#FF9933"});
var items = $($this)[0];
var ulIndx;
$(".tabItem").each(function(i,n){
if(n==items){
ulIndx = i;
}
})
$(".tabUl li").css({"color": "#89CFE8"});
var ulItems = $(".tabUl li")[ulIndx];
$(ulItems).css({"color": "#FF9933"});
moveNav(ulIndx);
})
$(".navScroll").on("click","li",function(e,index){ //下拉点击样式
var $this=$(this);
$("li").css({"color": "#89CFE8"})
$($this).css({"color": "#FF9933"});
var items = $($this)[0];
var ulIndx;
$("li").each(function(i,n){
if(n==items){
ulIndx = i;
}
})
$(".tabItem").css({"color": "#89CFE8"});
var ulItems = $(".tabItem")[ulIndx];
$(ulItems).css({"color": "#FF9933"});
$(".drop_down img").attr("src","img/icon_events_fold.png");
$(".tabUl").css("display","none")
flag = true;
moveNav(ulIndx);
})
function moveNav(index){ //滑动栏移动效果
var allImg = $(".navScroll").find(".tabItem");
var navImgWidth = allImg.width();
var lastWidth = $(".container .lastWidth").width();
var windowWidth = $(window).width();
var navBox = $("#overflow");
if(navImgWidth*(index+1) >=windowWidth-navImgWidth){
if(navImgWidth*(index+1)<navImgWidth*(allImg.length-1)+lastWidth-windowWidth){
navBox.animate({scrollLeft:navImgWidth*(index+1)},500);
}else{
navBox.animate({scrollLeft:navImgWidth*(allImg.length)+lastWidth-windowWidth},500);
}
}else{
navBox.animate({scrollLeft:'0px'},1000);
}
}
</script>
</html>
导航栏可滑动
下拉点击会相应的改变导航栏
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.
-
javascript实现的又一个不错的滑动导航效果
导航,鼠标放上去看看效果 ::你会做,我也要会:: function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all)
-
JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.
-
HTML+JavaScript实现筋斗云导航栏效果
功能要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu
-
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
本文实例讲述了jQuery实现的粘性滚动导航栏效果.分享给大家供大家参考,具体如下: 粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单会固定在顶部:当点击菜单时,页面会平滑的滚动到对应的区域. 兼容性 由于 smint 使用了 position: fixed,所以它不兼容 IE6.适用浏览器:IE8.360.FireFox.Chrome.Safa
-
IOS仿今日头条滑动导航栏
之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG
-
jquery实现鼠标点击后展开列表内容的导航栏效果
本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择.本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-co
-
jQuery蓝色风格滑动导航栏代码分享
这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址 为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo
-
Android开发基于ScrollView实现的渐变导航栏效果示例
本文实例讲述了Android开发基于ScrollView实现的渐变导航栏效果.分享给大家供大家参考,具体如下: 前些日子项目要在原来的页面上加入渐变导航栏的功能,查了很多资料,很多资源都是监听到listview的高度来实现渐变导航栏的效果,可是项目里面很多的界面都是使用ScrollView来实现滑动效果. 实在没办法,就自己写了一个test来实现这个效果. 话不多说,马上看一下思路吧,其实渐变导航栏无非就是改变导航栏的透明度也就是可以设定一个高度,根据这个高度,监听ScrollView滑动的距离
-
js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下 最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageSize (自己设置) 总页数: totalPageNum (根据上面的参数计算) 当前页: currentPageNum (前台传入) 当前页要显示的内容 : List<PageInfo> (查数据库: pageSize和currentPageNum每页的计算起始记录索引 2. 在html页面
-
Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态
-
JavaScript实现HTML导航栏下拉菜单
JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐.其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素,选择器优先级等等.废话不多说,直接看效果! 样式有点丑. 代码实现(JavaScript) 1.获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById("show&quo