<div class="product_intro container clearfix">
<div class="product_img">
<div class="product_img_1">
<div class="mask"></div>
<div class="show_big">
<img src="upload/big.jpg" class="big" alt="">
</div>
<img src="upload/s3.png" alt=""></div>
<div class="show_images">
<a href="javascript:;" class="left_span"></a>
<a href="javascript:;" class="right_span"></a>
<ul>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt="" class="current"></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
</ul>
</div>
</div>
<script>
var mask = document.querySelector('.mask');
var show_big = document.querySelector('.show_big');
var product_img_1 = document.querySelector('.product_img_1');
product_img_1.addEventListener('mouseover', function() {
mask.style.display = 'block';
show_big.style.display = 'block';
})
product_img_1.addEventListener('mouseout', function() {
mask.style.display = 'none';
show_big.style.display = 'none';
})
var pro_img_width = product_img_1.offsetWidth;
var pro_img_height = product_img_1.offsetHeight;
product_img_1.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var mask_width = mask.offsetWidth;
var mask_height = mask.offsetHeight;
var maskmaxX = this.offsetWidth - mask_width;
var maskmaxY = this.offsetHeight - mask_height
var maskX = x - mask_width / 2;
var maskY = y - mask_width / 2;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskmaxX) {
maskX = maskmaxX;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskmaxY) {
maskY = maskmaxY;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
var big = document.querySelector('.big')
console.log(big.offsetWidth)
var bigmaxX = show_big.offsetWidth - big.offsetWidth;
var bigmaxY = show_big.offsetHeight - big.offsetHeight;
var bigX = maskX * bigmaxX / maskmaxX;
var bigY = maskY * bigmaxY / maskmaxY;
big.style.left = bigX + 'px';
big.style.top = bigY + 'px';
})