jQuery鼠标滚轴

今天做一特效,挺简单的效果:

默认情况下,左侧菜单全部显示(很多个菜单不允许出现滚动条)

第一:每页显示个数根据根据窗口的高度来自动计算

第二:上面的标记栏(类似于小图标)根据菜单的个数自动计算个数(菜单总数/每页显示个数)

第三:点击“标记”时,自动切换到指定的页面

第四:添加鼠标滚轴事件,向上滚依次向下翻一页,向下滚一次则向上翻一页

1、页面布局:

<div class="leftnav_scroll" id="haveLoginedLeftContent"><!--整个左侧菜单DIV-->
 <ul id="menuall">
    <li class="menuall">
        <a href="javascript:void(0);" title="点击菜单显示所有子菜单">菜单</a><!--点击时用来加载二级菜单-->
    </li>
    <li class="lenavtop lenavtopgzrc">
      <a href="javascript:void(0);" title="返回首页"></a><!--点击时用来刷新center的页面内容-->
    </li>
 </ul>
 <ul id="firstMenu">
    <li class="menutab" id="menutab"> <!--小图标li-->
    	<a href="javascript:void(0);" onclick="toNextMenu(this,1)" class="xz"></a>
    </li>
<!--菜单-->
  <c:forEach items="${menuList }" var="menu">
	    <li class="lenavtop dingshi">
	    <a id="fun_${menu.menuId}"  name="${menu.menuName }"></a>
	    </li>
    </c:forEach>
 </ul>
</div>

 2、所用的JS:

<script type="text/javascript">
	var tabMap = new Map();
	$(function(){
		//计算可以选取一级节点的数量
		var liNum = $("#firstMenu").children("li:gt(0)").length;//获取除了第一个li其他li的个数,第一个li是小图标所在li
		if(liNum>0){//至少有一个
			var leftH = $(".leftnav_scroll").height();//整个DIV的高度
			var menuallH = parseInt($("#menuall").children("li").eq(0).height())+ parseInt($("#menuall").children("li").eq(1).height());
			var menutabH = $("#menutab").height();
			//剩下的li高度为:
			//alert(leftH+" "+menuallH+" "+menutabH);
			var restLiH = leftH-menuallH-menutabH;
			var liH = parseInt($("#firstMenu").children("li").eq(2).height());//获取第二个li的高度,来计算大概能容纳多少个li
			/*
			alert(liH);
			if(liH<67){
				liH=67;//目前css中其高度为67px,IE中计算出来是67,在火狐中却是20
			}
			*/
			var tabSize = Math.floor(restLiH/liH);//向下取整:每次能容纳几个
			tabMap.put("tabSize",tabSize);//把每页能容纳的数量存到map里面避免其他地方需要用到时重复计算的问题
			//总数除以每次容纳的数量,可以得到总共需要多少个提示点
			var tabNum = Math.ceil(liNum/tabSize);
			//alert(tabNum);
			if(tabNum>1){
				var tabStr="";
				for(var i=0;i<tabNum-1;i++){//减去的一个是原本就已经存在的那个
                                       //因为使用的小图标使用的顺序从1开始,且第一个本来就存在,所以需要加2
					tabStr +="<a href='javascript:void(0);' onclick='toNextMenu(this,"+(i+2)+");'></a>";
				}
				$("#menutab").append(tabStr);//追加到menutab后面
				$("#firstMenu").children("li:gt("+tabSize+")").hide();//打开时只需要加载指定的个数就行,其他的隐藏
			}
			
		}
		
		//为左边的菜单栏添加鼠标滚轴事件
		$("#haveLoginedLeftContent").bind('mousewheel', function(event, delta, deltaX, deltaY){
			//delta为1向上滚动  delta为-1向下滚动
			//alert("delta="+delta+"   deltaX="+deltaX+"   deltaY="+deltaY);
			var $A = $("#menutab").children("a.xz");//获取当前选定状态下的a对象
			if(delta<0){//说明向下滚动那么向下翻页
				var $nextA = $A.next();
				if(!isempty($nextA)){//说明对象存在
					toNextMenu($nextA,$A.index()+2);					
				}
			}else{//向上滚
				var $nextA = $A.prev();
				if(!isempty($nextA)){//说明对象存在
					toNextMenu($nextA,$A.index());					
				}
			}
		});
	});
	
	//点击各个提示点时,切换一级菜单
	function toNextMenu(obj,tabOrder){
		var order =1;
		if(tabOrder!=null && tabOrder!=''){
			order = tabOrder;
		}
		//样式变化
		$(obj).addClass("xz").siblings().removeClass("xz");
		order= parseInt(order);
		var tabSize=parseInt(tabMap.get("tabSize"));//每页显示个数
		var start = parseInt((order*tabSize)-(tabSize-1));//计算第order页第一个显示的li的下标
		var end = parseInt(order*tabSize);//最后一个下标
		$("#firstMenu").children("li:lt("+start+")").hide();//下标小于start的li隐藏
		$("#firstMenu").children("li").eq(0).show();//第一个li是tab,不能隐藏
		$("#firstMenu").children("li:gt("+end+")").hide();//下标大于end的li也隐藏,这样在start和end之间的就显示出来啦
		//alert(start+"\n"+end);
		$("#firstMenu").children("li:gt(0)").slice(start-1,end).show();
		/*用循环依次比较,符合条件的显示,否则隐藏
		$("#firstMenu").children("li:lt("+start+")").hide();
		$("#firstMenu").children("li").eq(0).show();//第一个li是tab,不能隐藏
		$("#firstMenu").children("li:gt("+end+")").hide();
		for(var j=start;j<=end;j++){
			$("#firstMenu").children("li").eq(j).show();
		}
		*/
	}

        /**
        *验证js变量的值是否为空,
        * true-不存在
        * false-存在
        * 
        */
       function isempty(v){ 
	     switch (typeof v){ 
		case 'undefined' : return true;
		case 'string' : if(jQuery.trim(v).length == 0) return true; break; 
		case 'boolean' : if(!v) return true; break; 
		case 'number' : if(0 === v) return true; break; 
		case 'object' : 
		if(null === v) return true; 
		if(undefined !== v.length && v.length==0) return true; 
		for(var k in v){return false;} return true; 
		break; 
	      } 
              return false; 
        }
</script>

 3、注意点:

原本小图标的点击事件是添加在href中的,即:

<a href="javascript:toNextMenu(this,1);" class="xz"></a>

 后来在使用的时候发现有问题:那个this所代表的当前对象根本传递不过去,如果不传过去操作起来又会比较麻烦,就改成了拥有同样效果的下列代码:

<a href="javascript:void(0);" onclick="toNextMenu(this,1)" class="xz"></a>

 至于href的传对象问题,网上是说:

既然onclick定义的是一个函数,并且是调用元素的一个方法,this就代表该元素。
如果是写在 href="javascript:" 里的代码,他的作用域是全局的,所以写this,它不知道到底是那个元素。

 参考:http://www.cnblogs.com/wwlearn/archive/2009/01/19/1378592.html

相关推荐