1.实现效果：
文章图片
移动遮挡框，右边的图片响应的放大并移动。
2.实现思路：
（1）鼠标移动到图片上，遮罩层和右边盒子显示。鼠标移出，遮罩层和右边盒子消失。
（2）黄色遮罩层跟随鼠标移动
文章图片
（3）右边图片跟随左边图片移动
文章图片
注意：右边图片的移动方向与左边遮罩层的移动方向相反，因此，右边图片移动距离是负的。
右边大盒子：多余的图片不显示，用overflow:hidden.来隐藏
3.代码展示
仿京东放大镜案例 - 锐客网 body {
padding: 0;
margin: 0;
}
.preview {
position: relative;
float: left;
width: 400px;
height: 300px;
}
.small {
width: 400px;
height: 300px;
}
.mask {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-color: rgba(199, 211, 91, 0.3);
cursor: move;
}
.big {
display: none;
position: absolute;
top:0px;
left:410px;
background-color: thistle;
width: 600px;
height: 500px;
z-index: 999;
overflow: hidden;
/* 超过图片的部分会隐藏 */
}
.bigImg {
position: absolute;
top: 0;
left: 0;
}
文章图片
文章图片
【前端案例练习|js练习（仿京东放大镜案例）】
推荐阅读
- javascript|仿京东放大镜效果源码分享
- BOM和DOM操作|JavaScript实现 - 仿京东放大镜效果
- javascript|案例（仿京东放大镜效果）
- html|仿京东的图片放大镜案例
- JavaScript，Python，Ruby，Swift和Scala中的Option/Maybe，Ether和Future Monad
- 创建你的第一个GraphQL API详细步骤
- ES6对话框介绍和用法示例
- ES6运算符介绍和用法示例
- ES6 void关键字