前言:
<!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>是两个同级的盒子
实现的效果,只是第二个盒子的位置相对于第一个盒子的点击位置联动变化