jquery实现横向导航栏左右滚动

javascript

2018-10-14

40

0

在很多界面上,有时候导航菜单超出了界面的限制,不能完全显示所有的菜单,虽然有很多解决方法,今天告诉大家的是一个都常见的方法,不过在百度了之后,都没有找到理想的代码。所以就自己写了一个。现在分享给大家。

一、先下载所需要的js文件

 jquery-2.1.1.min.js和jquery.visible.js(点击下载)

二、引入JS文件

<script src="/templates/JBlog/assets/js/jquery-2.1.1.min.js"></script>
<script src="/templates/JBlog/assets/js/jquery.visible.js"></script>

三、编写HTML代码

 <!-- -->
  <div class="jblog-nav">
    <div style="margin:0 auto;width:1220px;height: 4rem;">
		<div style="margin:0 0 0 10px;padding:auto 0;float:left;width:30px;height:4rem;cursor: pointer;" id="btnLeft">
			<img src="/templates/JBlog/assets/images/leftArraw.png" style="height:100%;"/>
		</div>
		<div class="jblog-nav-content" style="float:left;position: relative;" id="mainMenu">
		  <ul style="width: 100000000px;position: absolute;left:0">
			<li><a href="/">首页
			</a>
			</li>
					<li >
					<a  href="/article-nginx-1.html">
					nginx
					</a>
					</li>
					<li >
					<a  href="/article-android-1.html">
					android
					</a>
					</li>
					<li >
					<a  href="/article-js-1.html">
					javascript
						<span class="x-a-border"></span>
					</a>
					</li>
					<li >
					<a  href="/article-webui-1.html">
					Hwebui
					</a>
					</li>
					<li >
					<a  href="/article-linux-1.html">
					linux
					</a>
					</li>
					<li >
					<a  href="/article-java技术文章-1.html">
					java技术文章
					</a>
					</li>
					<li >
					<a  href="/article-interestBlog-1.html">
					兴趣文章
					</a>
					</li>
					<li >
					<a  href="/article-知识问答-1.html">
					知识问答
					</a>
					</li>
					<li >
					<a  href="/article-健康-1.html">
					健康
					</a>
					</li>
					<li >
					<a  href="/article-家常菜-1.html">
					家常菜
					</a>
					</li>
					<li >
					<a  href="/article-中国茶-1.html">
					中国茶
					</a>
					</li>
					<li >
					<a  href="/article-经济-1.html">
					经济
					</a>
					</li>
		  </ul>
		</div>
		<div style="margin:0 0 0 10px;padding:auto 0;float:left;width:30px;height:4rem;cursor: pointer;" id="btnRight">
			<img src="/templates/JBlog/assets/images/rightArraw.png" style="height:100%;"/>
		</div>
	</div>
  </div>

四、编写js代码

<script type="text/javascript">
$(document).ready(function() {
  $('code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
  $('video,audio').mediaelementplayer();
});
function reply(id){
	$("#parent_id").val(id);
}

$(document).ready(function(){
	function getMenuHiddenElement(obj,containerSelector){
	    	var array = [];
	    	var arrayLeft = [];
	    	var arrayRight = [];
	    	var fold = false;
	    	obj.each(function(index){
	    		var isVisible = $(this).visible(false, false, 'horizontal', containerSelector);
	    		if(!fold&&!isVisible){
	    			arrayLeft.push(index);
	    		}else{
	    		    fold = true;
	    		}
	    		if(fold&&!isVisible){
	    			arrayRight.push(index);
	    		}
	    	});
	    	array.left = arrayLeft;
	    	array.right = arrayRight;
	    	return array;
	    }
		
	function jumpClassToVisible(objIndex,direction,containerSelector){
	        var container = $("#mainMenu").find("ul");
	    	var itemObj = $("#mainMenu").find("li");
	    	var obj = itemObj.eq(objIndex);
	    	var currentWidth = 10;
	    	var index = direction == "p"?"+":"-";
	    	var containerSelectorObj = $(containerSelector);
	    	var isVisible = obj.visible(false, false, 'horizontal', containerSelectorObj);
	    	var contanerParent = container.parent();
	    	var containerLeft = contanerParent.offset().left;
	    	var containerRight =contanerParent.offset().left+contanerParent.width();
	    	var folder;
	    	if(direction=="p"){
	    		folder = obj.offset().left<containerLeft;
	    		currentWidth = containerLeft - obj.offset().left;
	    	}else if(direction=="m"){
	    		folder = containerRight<obj.offset().left+obj.width();
	    		currentWidth = obj.offset().left+obj.width()+5 - containerRight;
	    	}
	    	
	    	if(!isVisible&&folder&&parseInt(currentWidth)>0){
	    		var containerLeft = container.css("left");
	    		container.animate({ "left":index+"="+currentWidth+"px"}, 1);
	    	}
	}
	
	$("#btnLeft").click(function(){
		var container = $("#mainMenu").find("li");
		var arrays = getMenuHiddenElement(container,"#mainMenu");
		var arrayLeft = arrays.left;
		if(arrayLeft.length<=0) return;
		var objIndex = arrayLeft[arrayLeft.length-1];
		cacheJS.set("position",objIndex);
		jumpClassToVisible(objIndex,"p","#mainMenu");
	});
	
	
	$("#btnRight").click(function(){
		var container = $("#mainMenu").find("li");
		var arrays = getMenuHiddenElement(container,"#mainMenu");
		var arrayRight = arrays.right;
		if(arrayRight.length<=0) return;
		var objIndex = arrayRight[0];
		cacheJS.set("position",objIndex);
		jumpClassToVisible(objIndex,"m","#mainMenu");
	});
	
	
	var position = cacheJS.get("position");
	if(position!=null&&typeof(position)!="undefined"){
		jumpClassToVisible(position,"m","#mainMenu");
	}
	
});

</script>

五、最终效果

欢迎访问:www.hongfu951.com博客,查看更多文章

发表评论

全部评论:0条

鸿福951

努力打造一个好用的webui

热评文章

推荐文章