<!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>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1200px;
margin: 50px auto;
}
.left{
width: 400px;
height: 400px;
position: relative;
float: left;
}
.left img{
width: 400px;
height: 400px;
}
.shadow{
width: 100px;
height: 100px;
background-color: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
display: none;
}
.right {
width: 300px;
height: 300px;
float: left;
margin-left: 40px;
display: none;
position: relative;
overflow: hidden;
}
.right img{
width: 1200px;
height: 1200px;
position: absolute;
left: 0;
top: 0;
}
ul{
display: flex;
list-style: none;
}
ul img{
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<img src="../images/1.jpg" >
<div class="shadow"></div>
</div>
<div class="right">
<img src="../images/1.jpg" >
</div>
<div style="clear: both;"></div>
<ul>
<li>
<img src="../images/1.jpg" data-small="../images/11.jpg" >
</li>
<li>
<img src="../images/2.jpg" data-small="../images/2.jpg" >
</li>
<li>
<img src="../images/3.jpg" data-small="../images/3.jpg" >
</li>
<li>
<img src="../images/4.jpg" data-small="../images/4.jpg" >
</li>
</ul>
</div>
<script>
// css结构
// 左边大盒子 图片 遮罩层
// 右边显示的小盒子 大图
// 两边的图片时等比例的
// 遮罩层的大小和右边显示区的大小是同比例的
// 遮罩层大图显示区的比例 = 左边图和右边大图的比例
// 实现？
// 左边鼠标跟随
// cssText会覆盖行内样式
// display:none 获取不到样式
// 大图和遮罩层走的方向是相反的 ！！！！！！
// 大图的移动比例 = 大图的移动范围 / 遮罩层的移动范围
var oShadow = document.querySelector(‘.shadow‘) ;
var oLeft = document.querySelector(‘.left‘) ;
var oRight = document.querySelector(‘.right‘) ;
var oBox = document.querySelector(‘.box‘);
var oBigImg = document.querySelector(‘.right img‘) ;
// oShadow display:none 因此元素的css获取不到
// var r = oShadow.offsetWidth / 2;
oLeft.addEventListener(‘mouseover‘ , function(){
oShadow.style.display = ‘block‘ ;
oRight.style.display = ‘block‘ ;
var r = oShadow.offsetWidth / 2;
var maxLeft = oLeft.clientWidth - oShadow.offsetWidth ;
var maxTop = oLeft.clientHeight - oShadow.offsetHeight ;
document.onmousemove = function(e){
var e = event || e ;
var left = e.x - oBox.offsetLeft - r ;
var top = e.y - oBox.offsetTop - r ;
if(left < 0) {
left = 0
}
if(top < 0) {
top = 0 ;
}
if(left > maxLeft) {
left = maxLeft
}
if(top > maxTop) {
top = maxTop
}
// oShadow.style.cssText = `display:block;left:${left}px;top:${top}px` ;
oShadow.style.left = left + ‘px‘ ;
oShadow.style.top = top + ‘px‘ ;
// 大图的宽度
var bigW = parseInt(getStyle(oBigImg , ‘width‘)) ;
// 大图显示区的宽度
var bigSHowW = parseInt(getStyle(oRight , ‘width‘)) ;
// 左边图的宽度
var leftW = parseInt(getStyle(oLeft , ‘width‘))
// 左边遮罩层的宽度
var oShadowW = parseInt(getStyle(oShadow , ‘width‘))
var scale = (bigW - bigSHowW) / (leftW - oShadowW) ;
oBigImg.style.left = -left * scale + ‘px‘ ;
oBigImg.style.top = -top * scale + ‘px‘ ;
}
})
oLeft.addEventListener(‘mouseout‘ , function() {
oShadow.style.display = ‘none‘;
document.onmousemove = null ;
})
// 切换图片
// 换路径
var oUl = document.querySelector(‘ul‘) ;
var oLeftImg = document.querySelector(‘.left img‘) ;
oUl.addEventListener(‘mouseover‘ , function(e) {
var e = event || e ;
var target = e.target ;
if(target.tagName === ‘IMG‘) {
var src = target.getAttribute(‘data-small‘);
console.log(src);
oLeftImg.src = src ;
oBigImg.src = src ;
}
})
function getStyle(ele , property) {
if(window.getComputedStyle) {
return getComputedStyle(ele)[property]
}
return ele.currentStyle(property)
}
</script>
</body>
</html>
