JS实现仿淘宝鼠标移入图片右侧显示区域大图片

// 获取左侧图片路径后赋值给右侧大图片 如果左侧有多张小图片 请将获取的ID改成class,然否使用for循环,不会的去社会猿提问,我会在答案区留下demo,地址:www.shehuiyuan.com

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 	* {
 margin:0;
 padding:0;
}

.w {
 width: 1190px;
 margin: 0 auto;

}
.fdj {
 margin-top: 20px;
}

.fdj .leftBox {
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;
 float: left;
 position: relative;
 overflow: hidden;
}

.fdj .tool {
 width: 250px;
 height: 250px;
 background:gold;
 opacity:.5;
 filter:alpha(opacity=50);
 position: absolute;
 top:0;
 left: 0;
 cursor: move;
 /* 默认隐藏 */
 display: none;

}
/* 给小黄加上active 就会显示 */
.fdj .tool.active {
 display: block;
}

.fdj .rightBox {
 width: 500px;
 height: 500px;
 border:1px solid #ccc;
 float: left;
 overflow: hidden;
 /* 隐藏 */
 display: none;
 position: relative;
}
/* 加上active表示显示 */
.fdj .rightBox.active {
 display: block;
}

.fdj .rightBox img {
 position: absolute;
}
 </style>
</head>
<body>
 <div class="w">
 <div class="fdj">
 <!-- 左侧 -->
 <div class="leftBox" id="_leftBox">
 <!-- 小图 -->
 <img src="http://www.duanlonglong.com/images/defaultpic.gif" id="hqsrc" alt="" style="width: 100%;height: 100%;" />
 <!-- 小黄盒子 -->
 <div class="tool" id="_tool"></div>
 </div>
 <!-- 右侧 -->
 <div class="rightBox" id="_rightBox" style="position: relative;">
 <img id="_bImg" src="" alt=""/>
 </div>
 </div>
 </div>
 <script type="text/javascript">
 	//【准备:获取要操作的元素】
var _leftBox = document.querySelector('#_leftBox'); // 左侧盒子
var _tool = document.querySelector('#_tool'); // 小黄盒子
var _rightBox = document.querySelector('#_rightBox'); // 右侧盒子
var _bImg = document.querySelector('#_bImg'); // 右侧盒子中的大图片
var _hqsrc = document.querySelector('#hqsrc'); // 左侧盒子中的图片

//【功能1:鼠标进入/离开左侧盒子显示/隐藏小黄和右侧盒子】
// 1. 给_leftBox注册鼠标进入事件 onmouseenter
_leftBox.onmouseenter = function () {
 // 1.1 显示小黄盒子,给小黄盒子添加类名 active
 _tool.className = 'tool active';
 // 1.2 显示右侧盒子,给右侧盒子添加类名 active 
 _rightBox.className = 'rightBox active';
 // 以下两行是计算右侧盒子内图片的宽高
 _bImg.style.width=((parseInt(_leftBox.clientWidth))/(parseInt(_tool.clientWidth))*100) + '%';
 _bImg.style.height=((parseInt(_leftBox.clientHeight))/(parseInt(_tool.clientHeight))*100) + '%';
 // 获取左侧图片路径后赋值给右侧大图片 如果左侧有多张小图片 请将获取的ID改成class,然否使用for循环,不会的去社会猿提问,我会在答案区留下demo,地址:www.shehuiyuan.com
 _bImg.src=_hqsrc.src;
}

// 2. 给_leftBox注册鼠标离开事件 onmouseleave
_leftBox.onmouseleave = function () {
 // 2.1 显示小黄盒子,给小黄盒子去除类名 active
 _tool.className = 'tool';
 // 2.2 显示右侧盒子,给右侧盒子去除类名 active
 _rightBox.className = 'rightBox';
}

//【功能2:鼠标在左侧区域移动时,控制小黄和右侧盒子中图片的位置】
// 1. 给左侧盒子注册鼠标移动事件 onmosuemove
_leftBox.onmousemove = function (e) {
 // 2. 通过事件对象获取鼠标相对元素的位置(x,y)
 var x = e.clientX - _leftBox.offsetLeft- _tool.offsetWidth/2;
 var y = e.clientY - _leftBox.offsetTop - _tool.offsetHeight/2;

 // 这里给x和y赋值时,不要用事件对象的offsetX和offsetY。
 // 原因:因为【事件冒泡】,鼠标在移动时,有时会移动到小黄盒子上。若移动到小黄盒子上时,获取的值不是相对于左侧盒子元素,而是相对小黄盒子元素。所以当鼠标进入或离开小黄时,获取的坐标值时大时小,导致小黄盒子上下左右波动。
 // 解决方案:在小黄移动事件中,停止冒泡。但是鼠标在移动时,就没有效果了。
 // 最终解决方案:放弃使用事件对象offsetX/Y。 选择事件对象的clienX/Y 结合左侧盒子的位置计算出正确的位置。

 // 2.1 对x和y限制
 if (x < 0) {
 x = 0;
 }
 if (y < 0) {
 y = 0;
 }
 if (x > _leftBox.offsetWidth - _tool.offsetWidth) {
 x = _leftBox.offsetWidth - _tool.offsetWidth;
 }
 if (y > _leftBox.offsetHeight - _tool.offsetHeight) {
 y = _leftBox.offsetHeight - _tool.offsetHeight;
 }

 // 3. 把计算好的位置 赋值给小黄 
 _tool.style.left = x + 'px';
 _tool.style.top = y + 'px';

 // 4. 设定右侧大图片的位置(设置的方向是相反的,比例关系是1:2)
 _bImg.style.left = -2 * x + 'px';
 _bImg.style.top = -2 * y + 'px';
}
 </script>
</body>
</html>

效果:

attachments-2020-07-ICMYQYD55f0344a902678.png

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/458.html