图片放大镜实例

点击这里查看效果

效果图:
图片放大镜实例_第1张图片

以下是代码:

 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>

原文:http://keleyi.com/a/bjad/q2ee2xyt.htm

web前端:http://www.cnblogs.com/jihua/p/webfront.html

你可能感兴趣的:(图片放大镜实例)