点击这里查看效果
效果图:
以下是代码:
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>