本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1.0,user-scalable=不”比;
& lt;脚本src=" https://www.yisu.com/zixun/node_modules/jquery/jquery.js "祝辞& lt;/script>
& lt; style>
* {
保证金:0;
填充:0;
}
.navScroll {
位置:相对;
}
#溢出{
宽度:100%;
高度:30 px;
overflow-x:滚动;
}
#溢出.container {
高度:30 px;
}
#溢出.container div {
浮:左;
宽度:100 px;
高度:30 px;
行高:30 px;
text-align:中心;
}
#溢出:-webkit-scrollbar {
显示:没有;
-webkit-overflow-scrolling:触摸;
}
.navScroll .drop_down {
位置:绝对的;
上图:0;
右:0;
宽度:50 px;
高度:30 px;
}
.navScroll .drop_down img {
宽度:100%;
高度:100%;
}
.tabUl.clearFix {
显示:没有;
宽度:100%;
list-style:没有;
z - index: 10;
背景:rgba (0, 0, 0, 1。);
}
李.tabUl {
浮:左;
宽度:6.25快速眼动;
高度:2.65625快速眼动;
行高:2.65625雷姆;;
text-align:中心;
}
.clearFix {
内容:“”;
显示:表;
明确:;
}
div, ul {
颜色:# 89 cfe8;
}
#溢出.container div.lastWidth {
宽度:50 px;
}
r {
颜色:# FF9933;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皀avScroll”比;
& lt; div id=耙绯觥北?
& lt; div类="容器"比;
& lt; div类=皌abItem红”比;
item1
& lt;/div>
& lt; div类=皌abItem”比;
第二条
& lt;/div>
& lt; div类=皌abItem”比;
item3
& lt;/div>
& lt; div类=皌abItem”比;
item4
& lt;/div>
& lt; div类=皌abItem”比;
item5
& lt;/div>
& lt; div类=皌abItem”比;
item6
& lt;/div>
& lt; div类=皌abItem”比;
item7
& lt;/div>
& lt; div类=皌abItem”比;
item8
& lt;/div>
& lt; div类=皌abItem”比;
item9
& lt;/div>
& lt; div类=皌abItem”比;
item10
& lt;/div>
& lt; div类=皌abItem”比;
item11
& lt;/div>
& lt; div类=" lastWidth "祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=癲rop_down”比;
& lt; img src=" https://www.yisu.com/zixun/img/icon_events_fold.png "下降=跋蛳隆盿lt="/比;
& lt;/div>
& lt; ul类=" tabUl clearFix”比;
& lt;李类="红色"祝辞item1
& lt;李祝辞item2
& lt;李祝辞item3
& lt;李祝辞item4
& lt;李祝辞item5
& lt;李祝辞item6
& lt;李祝辞item7
& lt;李祝辞item8
& lt;李祝辞item9
& lt;李祝辞item10
& lt;李祝辞item11
& lt;/ul>
& lt;/div>
& lt;/body>
& lt; script>
var宽度=0;
$(" #溢出.container div”)。每个(函数(){
宽度+=$ ().outerWidth(真正的);
});
$(" #溢出.container”)。css(“宽度”,宽度+“px”);
var=true标记;
$("。drop_down img) .click(函数(e){//箭头符号的变化
如果(国旗){
$("。drop_down img) .attr (“src”、“img/icon_events_unfold.png”);
$ (" .tabUl ") . css(“显示”、“块”)
国旗=false;
其他}{
$("。drop_down img) .attr (“src”、“img/icon_events_fold.png”);
$ (" .tabUl ") . css(“显示”,“没有一个”)
国旗=true;
}
});
var ulHeight=Math.ceil (($ ("。tabUl李”).length-1)/6) * 2.65625 +“快速眼动”;
$("。navScroll .tabUl”) . css(“高度”,ulHeight)
$ (“.navScroll”)。(“点击”、“.tabItem”、函数(e,指数){//滑动栏点击样式
var=$美元(这);
$ (" .tabItem”)。css({“色”:“# 89 cfe8”})
美元($)。css({“颜色”:“# FF9933 "});
var项=$(美元)[0];
var ulIndx;
$ (" .tabItem ") . each(函数(我,n) {
如果(n==物品){
ulIndx=我;
}
})
$("。tabUl李”)。css({“颜色”:“# 89 cfe8 "});
var ulItems=$ ("。tabUl李”)[ulIndx];
美元(ulItems)。css({“颜色”:“# FF9933 "});
moveNav (ulIndx);
})
$ (“.navScroll”)。(“点击”,“李”,函数(e,指数){//下拉点击样式
var=$美元(这);
$("李")。css({“色”:“# 89 cfe8”})
美元($)。css({“颜色”:“# FF9933 "});
var项=$(美元)[0];
var ulIndx;
$("李"). each(函数(我,n) {
如果(n==物品){
ulIndx=我;
}
})
$ (" .tabItem”)。css({“颜色”:“# 89 cfe8 "});
var ulItems=$ (“.tabItem”) (ulIndx);
美元(ulItems)。css({“颜色”:“# FF9933 "});
$("。drop_down img) .attr (“src”、“img/icon_events_fold.png”);
$ (" .tabUl ") . css(“显示”,“没有一个”)
国旗=true;
moveNav (ulIndx);
})
函数moveNav(指数){//滑动栏移动效果
var allImg=$ (“.navScroll”); (“.tabItem”);
var navImgWidth=allImg.width ();
var lastWidth=$ ("。容器.lastWidth”) .width ();
var windowWidth=$(窗口).width ();
var navBox=$(" #溢出");
如果(navImgWidth *(指数+ 1)祝辞=windowWidth-navImgWidth) {
如果(navImgWidth *(指数+ 1)& lt; navImgWidth * (allImg.length-1) + lastWidth-windowWidth) {
navBox.animate ({scrollLeft: navImgWidth *(指数+ 1)},500);
其他}{
navBox.animate ({scrollLeft: navImgWidth * (allImg.length) + lastWidth-windowWidth}, 500);
}
其他}{
navBox.animate ({scrollLeft:“0 px”}, 1000);
}
}
& lt;/script>
& lt;/html>
