JavaScript实现简易图片放大镜效果

图片放大镜效果代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;} .show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; } #div2 {width:304px; height:222px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;} #img1 { position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 图片放大代码</title>  </head> <body> <div id="div1"> <img src="/uploads/20261025/828f986b53aec21e4d8b3b1d40e078e507e7a458130c5bd37ff56aa1cc9ec887.jpg" /> <span></span> <div class="show"></div> </div> <div id="div2"> <img src="/uploads/20261025/828f986b53aec21e4d8b3b1d40e078e507e7a458130c5bd37ff56aa1cc9ec887.jpg" /> </div> </body> </html>

注意：若需引入外部JavaScript文件，必须刷新页面后方可执行效果。