导航点击左右箭头滑动

Html

Css

body {
	background:#eee;
}
a:hover {
	text-decoration:none;
}
ul {
	padding:0px;
	margin:0px;
}
li {
	list-style:none;
}
.box {
	margin-top:50px;
	position:relative;
	padding:0px 130px 0px 40px;
}
.c-menu {
	height:50px;
	overflow:hidden;
	width:100%;
	margin-right:60px;
}
.list-group {
	margin-bottom:0px;
}
.btn {
	display:inline-block;
	float:right
}
.c-item {
	border-radius:0px !important;
	float:left;
	display:inline-block;
}
.c-item a {
	float:left;
	padding:16px 30px;
	color:#fff;
	background:#18191a;
	display:inline-block;
}
.c-item a:hover {
	background:#f01400;
}
.c-item .icon {
	margin-top:4px;
	margin-left:3px;
	float:right;
}
.btn-group {
	position:absolute;
	top:6px;
	right:10px;
	width:116px;
}
.btn {
	background:#18191a;
	color:#fff;
	margin-left:1px;
	outline:none;
	padding:8px 12px;
	border:1px solid #18191a;
}
.btn:hover,.btn:focus {
	background:#18191a;
	color:#fff;
	outline:none;
}
#left {
	float:left;
}
#right {
	float:right;
	display:none;
}
.dropdown {
	background:#18191a;
	position:absolute;
	top:50px;
	display:none;
	width:135px;
}
.dropdown li {
	padding:10px;
	color:#fff;
}
.dropdown li:hover {
	background:#f01400;
	padding:10px;
	color:#fff;
}

$(function() {
    var $li = $("#c-ul > li");
    var screenWidth = $(window).width(); //屏幕的宽度
    var index = 0;
    var oneWidth = 0; //移动的宽度 
    var scrollSum = 0; //卷进去的总宽度
    var liSum = 0; //li总长度

$("#right").click(function() {
        $("#left").show();
        index = index - 1;
        oneWidth = oneWidth + $li.eq(index).width();
        $("#c-ul").stop(true, false).animate({
            "margin-left": oneWidth
        }, 500);
        scrollSum = scrollSum - $li.eq(index).width();
        if (index <= 0) {
            $("#right").hide();
            return false;
        }
    })
    for (var i = 0; i < $li.length; i++) {
        liSum = $li.eq(i).width() + 2 + liSum;
    }
    $("#left").click(function() {

$("#right").show();
        oneWidth = oneWidth - $li.eq(index).width();
        $("#c-ul").stop(true, false).animate({
            "margin-left": oneWidth
        }, 500);
        scrollSum = scrollSum + $li.eq(index).width();
        index = index + 1;
        if (liSum - scrollSum < screenWidth - 170) {
            $("#left").hide();
            return false;
        }
    })
    $("li").each(function() {
        $(this).mouseover(function() {
            $(this).find(".dropdown").stop(true, false).slideDown()
        })
        $(this).mouseout(function() {
            $(this).find(".dropdown").stop(true, false).slideUp()
        })
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

导航点击左右箭头滑动



代码描述：点击左右箭头可以向左向右滑动，支持响应式

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

浅浅请

相关代码

导航点击左右箭头滑动

最新