相对于目前的前端技术而言,js是一个绕不过去的一门语言所以一般情况下都是使用的js代码做的一些案例。
下面看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
<style>
/* 一、先设置两个大小同等的盒子,放入图片。
1、要求1张小
2、一张大图
二、在第一个盒子里设置一个小盒子
要求:
1、小盒子显示的内容,第二个大盒子的内容一样
2、移动小盒子第二个大盒子的内容一样显示放大的小盒子内容。
*/
/*
做法:
1、获取两个第一个大盒子的元素、小盒子的元素同时鼠标的位置信息,并添加判断让鼠标居中在小盒子的中心点。
2、计算图片的比例大小并完成相应的内容编辑。
*/
/* */
div {
float: left;
margin-left: 20px;
}
div.small {
width: 130px;
height: 130px;
position: relative;
overflow: hidden;
}
div.small img {
width: 100%;
height: 100%;
}
div span {
position: absolute;
width: 26px;
height: 26px;
background: #000;
opacity: 0.5;
left: 0;
cursor: move;
display: none;
}
div.big {
width: 130px;
height: 130px;
border: 1px solid #000;
overflow: hidden;
display: none;
position: relative;
}
.big img {
position: absolute;
}
</style>
</head>
<body>
<div class="small">
<span></span>
<img src="./img/小图女装.jpg" alt="">
</div>
<div class="big">
<img src="./img/大图女装.jpg" alt="">
</div>
<script>
//获取第一个大盒子
var smallBox = document.querySelector('.small')
//获取第二个大盒子
var bigBox = document.querySelector('.big')
//1、获取元素 span小盒子
var moveBox = document.querySelector('span')
//获取第二个大盒子里的img
var bigImg = document.querySelector('.big img')
//2、添加滑上 第一个大盒子鼠标划入出现小盒子和第二大盒子
smallBox.onmouseover = function () {
moveBox.style.display = 'block'
bigBox.style.display = 'block'
}
//添加滑离 第一个大盒子鼠标划入消失小盒子和第二大盒子
smallBox.onmouseout = function () {
moveBox.style.display = 'none'
bigBox.style.display = 'none'
}
//3、添加大盒子鼠标移入事件 小盒子跟随鼠标移动并且鼠标在小盒子中心
// 小盒子的移动距离是第二大盒子的图片比例移动距离
//鼠标离开div的高宽大小小盒子消失 (限制小盒子的移动范围)
smallBox.onmousemove = function (ev) {
var e = window.event || ev
// console.log(e.clientX);
// console.log(e.clientY);
// 给span的left 和top赋值
console.log(bigBox.offsetTop);
var moveX = (e.clientX - smallBox.offsetLeft - (moveBox.clientWidth / 2))
var moveY = (e.clientY - smallBox.offsetTop - (moveBox.clientHeight / 2))
//限制移动盒子的范围
if (moveX < 0) {
moveX = 0
}
if (moveX >= bigBox.clientWidth - moveBox.clientWidth) {
moveX = bigBox.clientWidth - moveBox.clientWidth
}
if (moveY < 0) {
moveY = 0
}
if (moveY >= bigBox.clientHeight - moveBox.clientHeight) {
moveY = bigBox.clientHeight - moveBox.clientHeight
}
// 大图片的移动
bigImg.style.left = -(moveX * 80 / 13) + 'px'
bigImg.style.top = -(moveY * 80 / 13) + 'px'
//移动盒子的移动
moveBox.style.left = moveX + 'px'
moveBox.style.top = moveY + 'px'
}
/*
移动盒子
left :0 img:left 0
left:130px img :left -800px
// left: 10px img :left x = - 80/13
y px img left: y* - 80/13
*/
</script>
</body>
</html>
</body>
</html>