模拟ＱＱ的停靠时隐藏效果，隐藏树形菜单

最新推荐文章于 2024-02-22 19:21:17 发布

原创最新推荐文章于 2024-02-22 19:21:17 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

工作笔记专栏收录该内容

24 篇文章

订阅专栏

目前只实现了停靠在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>