1.获取鼠标在盒子内的标签-
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 300px;
background: skyblue;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
<span></span>
<script>
var boxs = document.querySelector('div')
var spans =document.querySelector('span')
boxs.addEventListener('mousemove',function (e) {
// console.log(e);
var x = e.pageX - boxs.offsetLeft
var y = e.pageY - boxs.offsetTop
spans.innerHTML = '距离box的x的坐标是：'+x+'---'+'距离box的y的坐标是'+y
})
</script>
</body>
</html>
运行结果：
2.模态框拖拽案例
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dianji{
text-align: center;
cursor: pointer;
color: saddlebrown;
}
.box{
width: 350px;
height: 400px;
margin: 100px auto;
background: darksalmon;
opacity: 0.88;
position: fixed;
left: 0;
top:0;
z-index: 1000;
display: none;
}
.login{
width: 100%;
height: 40px;
/*padding: 10px 0 10px 0;*/
text-align: center;
font-size: 20px;
cursor: move;
}
.close{
float: right;
color: firebrick;
cursor: pointer;
}
.user1{
text-align: center;
line-height: 60px;
margin-top: 60px;
}
input{
margin-left: 10px;
}
.login2{
position: relative;
left: 50%;
top: 25%;
}
.mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #bbbbbb;
opacity: 0.3;
display: none;
}
.login{
}
</style>
</head>
<body>
<div class="dianji">点击，弹出登录框</div>
<div class="box">
<div class="login">
登录会员
<span class="close">关闭</span>
</div>
<div class="user1">
<div class="user2">用户名:<input type="text" placeholder="请输入用户名"></div>
<div class="user3"> 密码: <input type="password" placeholder="请输入登录密码"></div>
</div>
<div class="login2">登录</div>
</div>
<div class="mask"></div>
<script>
var dianjis = document.querySelector('.dianji')
var boxs =document.querySelector('.box')
var close = document.querySelector('.close')
var logins = document.querySelector('.login')
var masks = document.querySelector('.mask')
dianjis.addEventListener('click',function () {
boxs.style.display = 'block'
masks.style.display = 'block'
})
close.addEventListener('click',function () {
boxs.style.display = 'none'
masks.style.display = 'none'
})
logins.addEventListener('mousedown',function (e) {
var x = e.pageX - boxs.offsetLeft
var y = e.pageY - boxs.offsetTop
console.log(x, y);
document.addEventListener('mousemove',move1)
function move1(e) {
var maxX = e.pageX - x
var maxY = e.pageY - y
boxs.style.left = maxX - 125 / 2 + 'px'
boxs.style.top = maxY - (boxs.offsetHeight + 100) / 2 + 'px'
}
document.addEventListener('mouseup',function (e) {
document.removeEventListener('mousemove',move1)
})
})
</script>
</body>
</html>
运行结果：
2.京东淘宝放大镜：
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.box{
display: inline-block;
}
.clulture{
width: 300px;
height: 300px;
position: relative;
}
.mask{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
background: darksalmon;
opacity: 0.2;
display: none;
}
.big{
position: absolute;
left: 320px;
top:0;
width: 600px ;
height: 600px;
overflow: hidden;
display: none;
}
.clulture2{
width: 900px;
height: 900px;
position: absolute;
left:0 ;
top: 0;
}
</style>
</head>
<body>
<div class="box" >
<img class="clulture" src="../img/meinv.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img class="clulture2" src="../img/meinv.jpg" alt="">
</div>
<script>
var boxs = document.querySelector('.box')
var clultures = document.querySelector('.clulture')
var clultures2 = document.querySelector('.clulture2')
var masks = document.querySelector('.mask')
var bigs = document.querySelector('.big')
window.addEventListener('load',function () {
boxs.addEventListener('mouseover',function () {
masks.style.display = 'block'
bigs.style.display = 'block'
})
boxs.addEventListener('mouseout',function () {
masks.style.display = 'none'
bigs.style.display = 'none'
})
boxs.addEventListener('mousemove',function (e) {
var x = e.pageX - boxs.offsetLeft
var y = e.pageY - boxs.offsetTop
// console.log(x, y);
var maskX = x - masks.offsetWidth / 2
var maskY = y - masks.offsetHeight / 2
if (maskX <=0){
maskX = 0
} else if(maskX >= (clultures.offsetWidth - masks.offsetWidth)){
maskX = clultures.offsetWidth - masks.offsetWidth
}
if (maskY <= 0){
maskY = 0
} else if(maskY >= (clultures.offsetHeight - masks.offsetHeight)){
maskY = clultures.offsetHeight - masks.offsetHeight
}
// console.log(clultures.offsetWidth - masks.offsetWidth);
masks.style.left =maskX + 'px'
masks.style.top = maskY + 'px'
// 大图片的距离= 小图片的距离 * 大图片的最大距离 / 小图片的最大距离
var clultures2X = maskX * (clultures2.offsetWidth - bigs.offsetWidth) / (clultures.offsetWidth - masks.offsetWidth)
var clultures2Y = maskY * (clultures2.offsetHeight - bigs.offsetHeight) / ( clultures.offsetHeight - masks.offsetHeight)
clultures2.style.left = -clultures2X + 'px'
clultures2.style.top = -clultures2Y + 'px'
})
})
</script>
</body>
</html>
运行结果：
