点击这里查看效果
效果图：
以下是代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片放大镜-柯乐义</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 9 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/18/jquery.enlarge.js"></script> 10 <script type="text/javascript"> 11 //柯乐义 http://keleyi.com 12 $(function () { 13 $("#demo").enlarge( 14 { 15 // 鼠标遮罩层样式 16 shadecolor: "#FFD24D", 17 shadeborder: "#FF8000", 18 shadeopacity: 0.4, 19 cursor: "move", 20 21 // 大图外层样式 22 layerwidth: 480, 23 layerheight: 360, 24 layerborder: "#DDD", 25 fade: true, 26 27 // 大图尺寸 28 largewidth: 960, 29 largeheight: 720 30 }); 31 }); 32 33 </script> 34 <div style="width: 986px; margin: 0px auto;"> 35 <div><h3>图片放大镜</h3>把光标移动到下面图片上 <a href="http://keleyi.com/a/bjad/q2ee2xyt.htm" target="_blank">原文</a></div> 36 <a href="http://keleyi.com/image/a/5nxma18i.jpg" id="demo" style="position: relative; float: left;"> 37 <img src="http://keleyi.com/image/a/qsqtberv.jpg" width="240" height="180" alt="小图"> 38 <img src="http://keleyi.com/image/a/5nxma18i.jpg" width="960" height="720" style="display: none;" alt="大图"> 39 </a> 40 </div> 41 </body> 42 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！