本文已参与「新人创作礼」活动，一起开启掘金创作之路
1、模仿登录界面拖动登录框
<style>
* {
margin: 0 auto;
padding: 0 auto;
}
div {
position: absolute;
width: 100%;
height: 780px;
text-align: center;
padding-top: 20px;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
}
div a {
text-decoration: none;
color: #000;
}
.login {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: #fff;
transform: translate(-50%, -50%);
}
.login span {
position: absolute;
top: -10px;
left: 190px;
display: inline-block;
width: 30px;
height: 30px;
}
.login span img {
width: 30px;
height: 30px;
}
</style>
<body>
<div class="mask">
</div>
<div>
<a href="javascript:;">点击进行登录</a>
<div class="login">
登录
<span><img src="images/afternoon.png" alt=""></span>
</div>
</div>
<script>
var cli = document.querySelector('a');
var mask = document.querySelector('.mask');
var login = document.querySelector('.login');
cli.addEventListener('click', function () {
mask.style.display = 'block';
login.style.display = 'block';
})
var btn = document.querySelector('.login').querySelector('img');
console.log(btn);
btn.addEventListener('click', function () {
mask.style.display = 'none';
login.style.display = 'none';
})
var x, y, x1, y1, x2, y2;
login.addEventListener('mousedown', function (ev) {
x = ev.pageX - login.offsetLeft;
y = ev.pageY - login.offsetTop;
document.addEventListener('mousemove', move);
function move(evt) {
login.style.left = evt.pageX - x + 'px';
login.style.top = evt.pageY - y + 'px';
}
document.addEventListener('mouseup', function (ev1) {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
2、模仿淘宝鼠标放在小图上可以查看大图
<style>
body {
margin: 0;
}
img {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: yellow;
opacity: 0.7;
//最后这句可太重要了，功能是跟鼠标事件拜拜，不然鼠标移动事件会导致mask图层一直闪动。
pointer-events: none;
}
.big {
position: absolute;
top: 0;
left: 350px;
width: 450px;
height: 300px;
display: none;
overflow: hidden;
border: 1px solid #4c4c4c;
}
.big img {
position: absolute;
top: 0;
left: 350px;
width: 600px;
height: 400px;
}
</style>
<body>
<div>
<img src="images/haha.JPG" alt="">
<div class="mask"></div>
<div class="big">
<img src="images/haha.JPG" alt=""></div>
</div>
<script>
var pic = document.querySelector('img');
var mask = document.querySelector('.mask');
var bigpic = document.querySelector('.big');
var bigimage = document.querySelector('.big').querySelector('img');
pic.addEventListener('mouseover', function (ev) {
mask.style.display = 'block';
bigpic.style.display = 'block';
pic.addEventListener('mousemove', function (ev1) {
var maskX, maskY;
if (ev1.pageX - mask.offsetWidth / 2 < 0) {
maskX = 0;
} else if (ev1.pageX - mask.offsetWidth / 2 > pic.offsetWidth - mask.offsetWidth) {
maskX = pic.offsetWidth - mask.offsetWidth;
} else {
maskX = ev1.pageX - mask.offsetWidth / 2;
}
if (ev1.pageY - mask.offsetHeight / 2 < 0) {
maskY = 0;
} else if (ev1.pageY - mask.offsetHeight / 2 > pic.offsetHeight - mask.offsetHeight) {
maskY = pic.offsetHeight - mask.offsetHeight;
} else {
maskY = ev1.pageY - mask.offsetHeight / 2;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
/*bigimage的x轴最大移动距离=bigimage宽-bigpic宽，mask的x轴最大移动距离=pic宽-mask宽；这二者需成比例变动。*/
bigimage.style.left = -maskX / (pic.offsetWidth - mask.offsetWidth) * (bigimage.offsetWidth - bigpic.offsetWidth) + 'px';
bigimage.style.top = -maskY / (pic.offsetHeight - mask.offsetHeight) * (bigimage.offsetHeight - bigpic.offsetHeight) + 'px';
})
})
pic.addEventListener('mouseout', function () {
mask.style.display = 'none';
bigpic.style.display = 'none';
})
</script>
</body>
