【前端学习|仿京东放大镜案例】运行结果
文章图片
京东放大镜 - 锐客网
文章图片
文章图片
>
window.addEventListener('load', function() {
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 鼠标进入事件
box.addEventListener('mouseover', function(e) {
mask.style.display = 'block';
big.style.display = 'block';
});
// 鼠标移出事件
box.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
});
// 鼠标移动事件
box.addEventListener('mousemove', function(e) {
// 确认mask 的位置
var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
var y = e.pageY - this.offsetTop - mask.offsetHeight / 2;
// 最大偏移值，即大盒子-放大镜层
var maskMax = box.offsetWidth - mask.offsetWidth;
// 超出偏移量，强制修改
if (x <= 0) x = 0;
if (x >= maskMax) x = maskMax;
if (y <= 0) y = 0;
if (y >= maskMax) y = maskMax;
// 修改放大镜层的位置
mask.style.left = x + 'px';
mask.style.top = y + 'px';
// 计算大图的最大距离
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 两最大距离的商，即放大的倍数
var boom = bigMax / maskMax;
var bigX = x * boom;
var bigY = y * boom;
// 修改大图在盒子中的定位
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
});
});
>
* {
padding: 0;
margin: 0;
}.box {
position: relative;
width: 400px;
height: 400px;
margin: 50px 0 0 100px;
border: 1px solid #000000;
cursor: move;
}.box img {
width: 100%;
height: 100%;
}.mask {
display: none;
position: absolute;
width: 300px;
height: 300px;
top: 0px;
left: 0px;
border: 1px solid #ccc;
background: yellow;
opacity: .5;
}.big {
display: none;
position: absolute;
width: 600px;
height: 600px;
top: -1px;
left: 411px;
border: 1px solid #000000;
overflow: hidden;
}.big img {
position: absolute;
width: 800px;
height: 800px;
left: 0px;
top: 0px;
}
推荐阅读
- javascript|仿京东放大镜效果源码分享
- 前端案例练习|js练习（仿京东放大镜案例）
- BOM和DOM操作|JavaScript实现 - 仿京东放大镜效果
- javascript|案例（仿京东放大镜效果）
- html|仿京东的图片放大镜案例
- JavaScript，Python，Ruby，Swift和Scala中的Option/Maybe，Ether和Future Monad
- 创建你的第一个GraphQL API详细步骤
- web|Python 爬虫进阶必备 | 某代理免费页面数据加密逻辑分析
- ES6对话框介绍和用法示例