兼职 网站 小程序 建设,做站群网站会被k吗,wordpress付费下载主题,华为云建站视频教程仿京东放大镜 #xff08;1#xff09; 整个案例可以分为三个功能模块 #xff08;2#xff09; 鼠标经过小图片盒子#xff0c; 黄色的遮挡层 和 大图片盒子显示#xff0c;离开隐藏2个盒子功能 #xff08;3#xff09;黄色的遮挡层跟随鼠标功能。 #xff08;41 整个案例可以分为三个功能模块 2 鼠标经过小图片盒子 黄色的遮挡层 和 大图片盒子显示离开隐藏2个盒子功能 3黄色的遮挡层跟随鼠标功能。 4移动黄色遮挡层大图片跟随移动功能。 分析: 1 黄色的遮挡层跟随鼠标功能。 2 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。 3 首先是获得鼠标在盒子的坐标。 4 之后把数值给遮挡层做为left 和top值。 5 此时用到鼠标移动事件但是还是在小图片盒子内移动。 6 发现遮挡层位置不对需要再减去盒子自身高度和宽度的一半。 7 遮挡层不能超出小图片盒子范围。 8 如果小于零就把坐标设置为0如果大于遮挡层最大的移动距离就把坐标设置为最大的移动距离 9 遮挡层的最大移动距离小图片盒子宽度 减去 遮挡层盒子宽度
div classpreview_wrap fldiv classpreview_imgimg src../images/s3.png altdiv classmask/divdiv classbigimg src../images/big.jpg alt classbigImg/div/div
/divstyle.fl {float: left;}.preview_wrap {width: 400px;height: 590px;}.preview_img {position: relative;height: 398px;border: 1px solid #ccc;}.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background: #b2fa90;opacity: .5;border: 1px solid #ccc;cursor: move;}.big {display: none;position: absolute;left: 410px;top: 0;width: 500px;height: 500px;background-color: pink;z-index: 999;border: 1px solid #ccc;overflow: hidden;}.big img {position: absolute;top: 0;left: 0;}
/stylewindow.addEventListener(load, function () {var preview_img document.querySelector(.preview_img);var mask document.querySelector(.mask);var big document.querySelector(.big);// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子preview_img.addEventListener(mouseover, function () {mask.style.display block;big.style.display block;})preview_img.addEventListener(mouseout, function () {mask.style.display none;big.style.display none;})// 2. 鼠标移动的时候让黄色的盒子跟着鼠标来走preview_img.addEventListener(mousemove, function (e) {// (1). 先计算出鼠标在盒子内的坐标var x e.pageX - this.offsetLeft;var y e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了// (3) 我们mask 移动的距离var maskX x - mask.offsetWidth / 2;var maskY y - mask.offsetHeight / 2;// (4) 如果x 坐标小于了0 就让他停在0 的位置// 遮挡层的最大移动距离var maskMax preview_img.offsetWidth - mask.offsetWidth;if (maskX 0) {maskX 0;} else if (maskX maskMax) {maskX maskMax;}if (maskY 0) {maskY 0;} else if (maskY maskMax) {maskY maskMax;}mask.style.left maskX px;mask.style.top maskY px;// 3. 大图片的移动距离 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离// 大图var bigIMg document.querySelector(.bigImg);// 大图片最大移动距离var bigMax bigIMg.offsetWidth - big.offsetWidth;// 大图片的移动距离 X Yvar bigX maskX * bigMax / maskMax;var bigY maskY * bigMax / maskMax;bigIMg.style.left -bigX px;bigIMg.style.top -bigY px;})})
