模擬QQ的停靠時隱藏效果,隱藏樹形菜單

目前只實現了停靠在left和top

//script腳本
//鼠標懸停
	function showTreeMenu() {
		//獲取treeMenu的top和left的值	
		var posTop = document.getElementById("treeMenu").offsetTop+document.body.scrollTop;
		var posLeft = document.getElementById("treeMenu").offsetLeft;
		
		if(posLeft<=0){ //判斷當前是否停靠在左側
				//$("img[name=switch]").attr("src", "images/closeTree.jpg"); //設置圖片
				$("#treeMenu").attr("style",
						"width:200px;height:250px;left:0px;top:"+posTop+"px;");
		} 
		
		if(posTop<=-10){ //判斷當前是否停靠在屏幕上方
				//$("img[name=switch]").attr("src", "images/closeTree.jpg"); //設置圖片
				$("#treeMenu").attr("style",
						"width:200px;height:250px;left:"+posLeft+"px;top:-10px;");
		} 
	}
	//鼠標移出
	function hideTreeMenu(){
		var posTop = document.getElementById("treeMenu").offsetTop+document.body.scrollTop;
		var posLeft = document.getElementById("treeMenu").offsetLeft;
		
		if(posLeft<=0){ //判斷當前是否停靠
			//$("img[name=switch]").attr("src", "images/openTree.jpg");
			$("#treeMenu").attr("style",
					"width:200px;height:250px;left:-155px;top:"+posTop+"px;");
		}
		
		if(posTop<=-10){
			//$("img[name=switch]").attr("src", "images/openTree.jpg");
			$("#treeMenu").attr("style",
					"width:200px;height:250px;left:"+posLeft+"px;top:-210px;");
		}
	}
 	
 	$(function(){
 		$("#treeMenu").draggable({
 			//easyUI的div拖拽
 			//onStopDrag:拖拽停止時觸發
	        onStopDrag: function (e) {
	        	var posTop = document.getElementById("treeMenu").offsetTop+document.body.scrollTop;
				var posLeft = document.getElementById("treeMenu").offsetLeft;
				if(posLeft<0){
					$("#treeMenu").attr("style",
					"width:200px;height:250px;left:-155px;top:"+posTop+"px;");
				}
				if(posTop<-10){
					$("#treeMenu").attr("style",
					"width:200px;height:250px;left:"+posLeft+"px;top:-210px;");
				}
	        }
    	    });
    });

//需要隱藏的樹形菜單
//使用easyui和zTree
 <div id="treeMenu" class="easyui-draggable"
			style="width:200px;height:210px;left:-155px;top:100px;"
			onmouseover = "showTreeMenu()" onmouseout = "hideTreeMenu()">
			<ul id="positionzTree" class="ztree"
				style="width:150px;height:200px;float:left"></ul>
</div>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章