JavaScript写放大镜效果
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style type=text/css> #middle { width: 400px; height: 400px; position: absolute; top : 50px; left : 100px; border: 1px solid; } #middle img { width: 400px; height: 400px; } #len { width: 200px; height: 200px; background: #f00; position: absolute; top: 0; left: 0; opacity: 0.5; display: none; } #big { width: 400px; height: 400px; position: absolute; top : 50px; left : 520px; border:1px solid; overflow: hidden; display: none; } #big img { width: 800px; height: 800px; position: absolute; top : 0; left : 0; } </style> </head> <body> <div id=middle> <img src=images/middle.jpg> <div id=len></div> </div> <div id=big> <img src=images/big.jpg id=big_img> </div> <script src=js/tools.js></script> <script> /* 鼠标移入/移出 div#middle */ $(#middle).onmouseenter = function(){ $(#len).style.display = block; $(#big).style.display = block; } $(#middle).onmouseleave = function(){ $(#len).style.display = none; $(#big).style.display = none; } // 求 div#middle 元素在文档中定位 var middleOffset = offset($(#middle)); /* 鼠标在 div#middle 上移动 */ $(#middle).onmousemove = function(e){ // 镜头坐标 var _top = e.pageY - middleOffset.top - 100, _left = e.pageX - middleOffset.left - 100; // 判断镜头是否在div#middle中图范围内移动 if (_top < 0) _top = 0; else if (_top > 200) _top = 200; if (_left < 0) _left = 0; else if (_left > 200) _left = 200;
更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599333