手机官网里这种鼠标移动或者悬停在图片上,旁边就会有一个放大的图片,这种请问怎么做呀
2条回答 默认 最新
- 崽崽的谷雨 2022-09-21 16:56关注
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { 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; border: 1px solid #ccc; overflow: hidden; display: none; } .big img { position: absolute; width: 800px; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; cursor: move; display: none; } .small { position: relative; } </style> </head> <body> <div class="box" id="box"> <div class="small"> <img src="https://img2.baidu.com/it/u=3104870425,3464488586&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1663866000&t=eb2be26093cef37a2e8b1b177909fada" width="350" alt="" /> <div class="mask"></div> </div> <div class="big"> <img src="https://img2.baidu.com/it/u=3104870425,3464488586&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1663866000&t=eb2be26093cef37a2e8b1b177909fada" alt="" /> </div> </div> <script> function my$(id) { return document.getElementById(id) } var box = my$('box'); var smallBox = box.children[0]; var bigBox = box.children[1]; console.log(bigBox.style.width); var smallImage = smallBox.children[0]; var mask = smallBox.children[1]; var bigImage = bigBox.children[0]; console.log(bigImage.style.width); // 1 鼠标经过的时候 显示 mask和bigBox , 当鼠标离开box的时候隐藏mask和bigBox // mouseenter mouseleave 不会触发事件冒泡 // mouseover mouseout 会触发事件冒泡 box.onmouseenter = function () { // 显示 mask和bigBox mask.style.display = 'block'; bigBox.style.display = 'block' } box.onmouseleave = function () { mask.style.display = 'none'; bigBox.style.display = 'none'; } // 2 当鼠标在盒子中移动的时候,让mask和鼠标一起移动 box.onmousemove = function (e) { e = e || window.event; // 获取鼠标在盒子中的位置,就是mask的坐标 var maskX = e.pageX - box.offsetLeft; var maskY = e.pageY - box.offsetTop; // 让鼠标出现在mask的中心点 maskX = maskX - mask.offsetWidth / 2; maskY = maskY - mask.offsetHeight / 2; // 把mask限制到box中 maskX = maskX < 0 ? 0 : maskX; maskY = maskY < 0 ? 0 : maskY; maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX; maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY; mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; // 3 当mask移动的时候,让大图片移动 // 求 大图片移动的距离 // mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离 // mask最大能够移动的距离 var maskMax = box.offsetWidth - mask.offsetWidth; // 大图片最大能够移动的距离 var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth; var bigImageX = maskX * bigImageMax / maskMax; var bigImageY = maskY * bigImageMax / maskMax; bigImage.style.left = -bigImageX + 'px'; bigImage.style.top = -bigImageY + 'px'; } </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 2无用
悬赏问题
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度
- ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
- ¥15 ETLCloud 处理json多层级问题
- ¥15 matlab中使用gurobi时报错
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么