图片效果如下:
在鼠标没有移入图片的时候
鼠标移入的时候
鼠标移动到那个位置就把那个位置放大
计算比例
宽比例 move的宽度-小盒子的宽度 /大盒子的宽度-大照片的宽度
高比例move的高度-小盒子的高度 /大盒子的高度-大照片的高度
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.smallBox {
position: relative;
width: 400px;
height: 250px;
margin-left: 0px;
margin-top: 0px;
float: left;
display: inline-block;
}
.smallBox img {
width: 400px;
}
.bigBox {
position: relative;
width: 800px;
height: 500px;
margin-left: 50px;
margin-top: 100px;
left: 350px;
top: -350px;
float: left;
border: 1px solid #ccc ;
overflow: hidden;
display: inline-block;
/* display: none;*/
}
.move {
position: absolute;
left:0;
top:0;
width: 120px;
height: 120px;
background-color: rgba(234,23,56,0.4);
/*display: none;*/
}
#bigPic {
position: absolute;
left: 0;
top:0;
}
</style>
</head>
<body>
<!--小盒子-->
<div class="smallBox">
<img src="images/2-small.jpg" alt="" id="smallPic">
<div class="move"></div>
</div>
<div class="bigBox">
<img src="images/2-big.jpg" alt="" id="bigPic">
</div>
<script src="获取元素.js"></script>
<script>
/*
offsetleft offsetTop
有绝对定位属性的: 他获取的是距离父元素左上角的距离值
没有绝对定位属性 他获取的是距离body 左上角的距离值
* offsetWidth
* offsetHeight --->盒模型总高
*
* */
window.onload = function () {
var smallBox = my$('.smallBox') //小盒子
var move = my$('.move') //运动元素
var bigBox = my$('.bigBox') //大盒子
var bigPic = my$('#bigPic') //大照片
/*
* 1:阴影块随着鼠标动---》获取鼠标位置
*
* */
/*smallBox.onmouseover = function(){
//让move和大盒子显示
move.style.display = 'block'
bigBox.style.display = 'block'
}
smallBox.onmouseout = function(){
move.style.display = 'none'
bigBox.style.display = 'none'
}
*/
//鼠标移入显示
smallBox.onmouseover = function(){
//让move和大盒子显示
move.style.display = 'block'
bigBox.style.display = 'block'
}
//鼠标移开消失
smallBox.onmouseout = function(){
move.style.display = 'none'
bigBox.style.display = 'none'
}
//鼠标在小照片盒子上运动
smallBox.onmousemove = function (e) {
//将鼠标变为移动样式
this.style.cursor = 'move'
console.log(e.clientX)
//先判断此时偏移量到底满足条件与否 如果不满足不赋值
//只需要判断超出边界的情况 水平运动 最小值 0
// 最大值 smallBox.offsetWidth-move.offsetWidth
var newLeft = e.clientX-smallBox.offsetLeft-move.offsetWidth/2;
var newTop = e.clientY-smallBox.offsetTop-move.offsetHeight/2;
if(newLeft < 0){
newLeft = 0;
}
if(newLeft > smallBox.offsetWidth-move.offsetWidth ){
newLeft = smallBox.offsetWidth-move.offsetWidth
}
if(newTop < 0){
newTop = 0;
}
if(newTop > smallBox.offsetHeight-move.offsetHeight ){
newTop = smallBox.offsetHeight-move.offsetHeight
}
move.style.left = newLeft +'px'
move.style.top = newTop +'px'
var widthRate = (my$('.move').offsetWidth -smallBox.offsetWidth)/
(bigBox.offsetWidth-bigPic.offsetWidth) ;
var heightRate = (my$('.move').offsetHeight -smallBox.offsetHeight)/
(bigBox.offsetHeight-bigPic.offsetHeight) ;
bigPic.style.left = -parseInt(move.style.left) / widthRate +'px'
bigPic.style.top = -parseInt(move.style.top) / heightRate +'px'
}
}
</script>
</body>
</html>