JS实现仿淘宝鼠标移入图片右侧显示区域大图片
// 获取左侧图片路径后赋值给右侧大图片 如果左侧有多张小图片 请将获取的ID改成class,然否使用for循环,不会的去社会猿提问,我会在答案区留下demo,地址:www.shehuiyuan.com
<!DOCTYPE html...
// 获取左侧图片路径后赋值给右侧大图片 如果左侧有多张小图片 请将获取的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>
效果：
- 发表于 2020-07-06 23:34
- 阅读 ( 920 )
- 分类：web前端开发
