javascript之放大镜的实现

最新推荐文章于 2024-10-02 05:39:15 发布

ATP.

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量57

点赞数

文章标签： javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/ATP39/article/details/129664500

版权

<!DOCTYPE html>

<html>

<style>

img {

display: block;

}

* {

margin: 0;

padding: 0;

}

.box {

width: 350px;

height: 350px;

margin: 100px;

border: 1px solid #ccc;

position: relative;

}

.big {

width: 400px;

height: 400px;

position: absolute;

top: 0;

left: 360px;

overflow: hidden;

display: none;

}

.big img {

position: absolute;

}

.mask {

width: 100px;

height: 100px;

background: rgba(255, 255, 0, 0.4);

position: absolute;

top: 0px;

left: 0px;

cursor: move;

display: none;

}

.small {

position: relative;

}

</style>

</head>

<body>

</div>

</div>

</body>

// 图片也是种资源,执行到img标签时,才去请求图片资源.js代码会继续执行

// 直接获取图片的宽高是不行的,因为图片资源没有加载完成.

window.onload = function () {

/**使用函数编程**/

+function () {

// 1===给small 绑定事件

$('.small').onmouseover = overHandler;

$('.small').onmouseout = outHandler;

$('.small').onmousemove = moveHandler;

}();

// 2===移入事件的回调函数

function overHandler() {

// 显示小黄块

$('.mask').style.display = 'block';

// 显示大图

$('.big').style.display = 'block';

}

// 3===移出事件的回调函数

function outHandler() {

$('.mask').style.display = 'none';

$('.big').style.display = 'none';

}

// 获取 box的定位

let boxLeft = $('.box').offsetLeft;

let boxTop = $('.box').offsetTop;

console.log(boxLeft,boxTop);

//获取大图的宽度和高度

let sw = $('.small').offsetWidth;

let sh = $('.small').offsetHeight;

console.log(sw,sh);

// console.log(sw, sh);

//4===鼠标移动事件

function moveHandler(eve) {

let mw = $('.mask').offsetWidth;

let mh = $('.mask').offsetHeight;

// 计算小黄块能够移动的最大left和top

let maskMaxL = sw - mw;

let maskMaxT = sh - mh;

// 获取鼠标相对于文档的坐标(没有滚动条和可视区的一致)

let mouseX = eve.pageX;//eve.clientX;

let mouseY = eve.pageY;//eve.clientY;

// console.log(mouseX, mouseY);

let maskX = mouseX - boxLeft - mw / 2;

let maskY = mouseY - boxTop - mh / 2;

// 判断不能超出左侧和上侧

if (maskX < 0) maskX = 0

if (maskY < 0) maskY = 0

// 判断不能超出右边界和下边界

// console.log(maskMaxL, maskMaxT);

if (maskX > maskMaxL) maskX = maskMaxL;

if (maskY > maskMaxT) maskY = maskMaxT

$('.mask').style.left = maskX + 'px'

$('.mask').style.top = maskY + 'px'

// 计算大图移动的最大位置

let bigMaxLeft = $('#big').offsetWidth - $('#img').offsetWidth;

let bigMaxTop = $('#big').offsetHeight - $('#img').offsetHeight;

// console.log(bigMaxLeft, bigMaxTop);

// 计算大图的实时位置且进行设置

$('#img').style.left = maskX / maskMaxL * bigMaxLeft + 'px'

$('#img').style.top = maskY / maskMaxT * bigMaxTop + 'px'

}

// 获取节点方法

function $(ele) {

let res = document.querySelectorAll(ele);

return res.length == 1 ? res[0] : res;

}

</script>

</html>

ATP.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫