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>
/* Enlarge for jQuery v1.1 2013 http://keleyi.com/ */ (function ($) { // 默认参数 var defaults = { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.5, cursor: "move", // 大图外层样式 layerwidth: 400, layerheight: 300, layerborder: "#DDD", fade: true, // 大图尺寸 largewidth: 1280, largeheight: 960 } // 插件入口 var enlarge = function (option) { // 合并参数 option = $.extend({}, defaults, option); // 循环处理 $(this).each(function () { var self = $(this).css("position", "relative"); var img = self.children().first(); // 计算大小图之间的比例 var ratio = { x: img.width() / option.largewidth, y: img.height() / option.largeheight } // 定义一些尺寸 var size = { // 计算鼠标遮罩层的大小 shade: { width: option.layerwidth * ratio.x - 2, height: option.layerheight * ratio.y - 2 } } // 创建鼠标遮罩层 var shade = $("<div>").css( { "position": "absolute", "left": "0px", "top": "0px", "background-color": option.shadecolor, "border": "1px solid " + option.shadeborder, "width": size.shade.width, "height": size.shade.height, "opacity": option.shadeopacity, "cursor": option.cursor }); shade.hide().appendTo(self); // 创建大图和放大图层 var large = $("<img>").css( { "position": "absolute", "display": "block", "width": option.largewidth, "height": option.largeheight }); var layer = $("<div>").css( { "position": "absolute", "left": self.width() + 5, "top": 0, "background-color": "#111", "overflow": "hidden", "width": option.layerwidth, "height": option.layerheight, "border": "1px solid " + option.layerborder }); large.attr("src", self.attr("href")); large.appendTo(layer); layer.hide().appendTo(self); // 不可移动的半径范围 var half = { x: size.shade.width / 2, y: size.shade.height / 2 } // 有效范围 var area = { width: self.innerWidth() - shade.outerWidth(), height: self.innerHeight() - shade.outerHeight() } // 对象坐标 var offset = self.offset(); // 显示效果 var show = function () { offset = self.offset(); shade.show(); if (option.fade) layer.stop().fadeIn(300); else layer.show(); } // 隐藏效果 var hide = function () { shade.hide(); layer.hide(); } // 绑定鼠标事件 self.mousemove(function (e) { // 鼠标位置 var x = e.pageX - offset.left; var y = e.pageY - offset.top; // 不在图像中则直接隐藏 if (x < 0 || x > self.innerWidth()) return hide(); if (y < 0 || y > self.innerHeight()) return hide(); // 判断是否在有效范围内 x = x - half.x; y = y - half.y; if (x < 0) x = 0; if (y < 0) y = 0; if (x > area.width) x = area.width; if (y > area.height) y = area.height; // 遮罩层跟随鼠标 shade.css( { left: x, top: y }); // 大图移动到相应位置 large.css( { left: (0 - x / ratio.x), top: (0 - y / ratio.y) }); }) .mouseenter(show) .mouseleave(hide); }); } // 扩展插件 $.fn.extend( { enlarge: enlarge }); })(jQuery)