jQuery鼠标滚轴

今天做一特效，挺简单的效果：

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

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

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

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

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

（鼠标滚轴用的Jquery的插件：jquery.mousewheel.js，具体可以参考：http://liuna718-163-com.iteye.com/blog/1796887）

 

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