获取鼠标在盒子里的位置2——扩展实现二级菜单的位置联动

最新推荐文章于 2022-05-12 15:58:30 发布

dongsdh

最新推荐文章于 2022-05-12 15:58:30 发布

阅读量171

点赞数 1

分类专栏：鼠标事件相关

本文链接：https://blog.csdn.net/dongsdh/article/details/86505669

版权

鼠标事件相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
    	*{margin: 0;padding: 0;}
    	body{position: relative;margin: 10px;}
        .box{  
            width: 100px;  
            height: 100px;  
            background-color: pink;  
            overflow: auto; 
            cursor: pointer;
        }
        .box2{
        	width: 100px;
		    height: 100px;
		    background-color: pink;
		    overflow: auto;
		    position: absolute;
		    top: 0px;
		    left: 100px;
		    display: none;
        } 
    </style>  
</head>  
<body>  
    <div class="box">  
    	<p>语文</p>
    	<p>数学</p>
    	<p>历史</p>
    	<p>人与自然</p>
    	<p>体育</p>
    	<p>英语</p>
    	<p>人与自然</p>
    	<p>体育</p>
    	<p>英语</p>
    </div> 
    <div class="box2">  
    	<p>语文第一章</p>
    	<p>语文第二章</p>
    	<p>语文第三章</p>
    	<p>语文第四章</p>
    	<p>语文第五章</p>
    	<p>语文第六章</p>
    	<p>语文第七章</p>
    </div>  
  	<script src="jquery.min.js"></script>
    <script>  
    	$("body").on("click",".box",function(){
    		$(".box2").show();
    	  	var _this=$('.box');
			var mouh = evfun(_this,event);
			var box2top=Math.ceil(mouh.y/21)-1
			console.log(box2top);
			$(".box2").css("top",box2top*21)
    	})
    	
    	function evfun(_this,event){
        	event = event || window.event;  
        	//2.获取鼠标在整个页面的位置  
        	var pagex = event.pageX || scroll().left + event.clientX; 
            var pagey = event.pageY || scroll().top + event.clientY; 
            //3.获取盒子在整个页面的位置  
            var xx =$(_this).offset().left;  
            var yy = $(_this).offset().top;
            //4.用鼠标的位置减去盒子的位置
            var targetx = pagex - xx;  
            var targety = pagey - yy; 
            var xydata={
            	x:targetx,
            	y:targety
            }
            return xydata
        }
    	
		//封装的scrollTop
		function scroll() {  
		    if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
		        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
		        return {
		            left: window.pageXOffset,
		            top: window.pageYOffset
		        }
		    }
		    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
		        return {
		            left: document.documentElement.scrollLeft,
		            top: document.documentElement.scrollTop
		        }
		    }
		    return {   // 未声明 DTD
		        left: document.body.scrollLeft,
		        top: document.body.scrollTop
		    }
		}
    </script>  
</body>  
</html>

效果：

说明:<div class="box"></div>和<div class="box2"></div>是两个同级的盒子

实现的效果，只是第二个盒子的位置相对于第一个盒子的点击位置联动变化

dongsdh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取鼠标在盒子里的位置2——扩展实现二级菜单的位置联动

前言：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin: 0;padd
复制链接

扫一扫