自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)

废话不多说,先看效果图,和上一章节用的是同一个小图片:

这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多



插件代码:

; (function ($) {
$.fn.gysFdj = function (options) {
var defaluts = {
cameraW: 100, //镜头宽度
cameraH: 100, //镜头高度
pointBjColor: "#000", //镜头的背景颜色
pointOpacity: 0.6, //镜头的透明度
zoomPos: 10, //放大框距离源框的位置
zoom: 2//放大倍数
};
options = $.extend(defaluts, options);
var obj = $(this);
obj.addClass("gysFdjOrigin");
var objOriImg=$("img",obj);
var objOriImgW=objOriImg.width();
var objOriImgH=objOriImg.height();
var fdCount = $(".gysFdjOrigin").length;
var fdAttr = "fd"; //属性变量
obj.attr(fdAttr, fdCount); //添加属性
var offset = obj.offset();
var objLeft = offset.left; //对象left
var objTop = offset.top; //对象top
var objWidth = obj.width(); //对象宽度
var objHeight = obj.height(); //对象高度
//镜头相对box的活动范围

var cameraMaxLeft = objWidth + objLeft - options.cameraW; //最大左范围
var cameraMaxTop = objHeight + objTop - options.cameraH; //最大下范围

var imgStr = obj.html();
var html = "";
html += "<div style='left:" + (objLeft + objWidth + options.zoomPos) + "px; top:" + objTop + "px;display:none; position:absolute;width:" + (options.cameraW * options.zoom) + "px;height:" + (options.cameraH* options.zoom) + "px;overflow:hidden;' class='gysFdjBox' " + fdAttr + "=" + fdCount + ">" + imgStr + "</div>";
$("body").append(html);
$("img", $(".gysFdjBox[" + fdAttr + "=" + fdCount + "]")).width(objWidth*options.zoom).height(objHeight*options.zoom);
var objFdjcamera = null;
if ($("#gysFdjcamera").length == 0) {
var pointBlock = "<div id='gysFdjcamera' style='width:" + options.cameraW + "px; height:" + options.cameraH + "px; background-color:" + options.pointBjColor + ";opacity:" + options.pointOpacity + ";filter:alpha(opacity="+options.pointOpacity*100+");cursor:crosshair;position:absolute;display:none;'></div>";
$("body").append(pointBlock);
}
objFdjcamera = $("#gysFdjcamera");
var nowLeft = 0, nowTop = 0;
obj.on("mouseover", function (event) {
objFdjcamera.show().attr(fdAttr, fdCount);
$(".gysFdjBox["+fdAttr+"="+fdCount+"]").show();
$(document).on("mousemove", function (event) {
var pointX = event.clientX+$(document).scrollLeft();
var pointY = event.clientY+$(document).scrollTop();
nowLeft = pointX - options.cameraW / 2;
nowTop = pointY - options.cameraH / 2;
if (nowLeft <= objLeft) { nowLeft = objLeft; }
else if (nowLeft >= cameraMaxLeft) { nowLeft = cameraMaxLeft; }
if (nowTop <= objTop) { nowTop = objTop; }
else if (nowTop >= cameraMaxTop) { nowTop=cameraMaxTop;}
objFdjcamera.css({ left: nowLeft + "px", top: nowTop + "px" });
nowLeft=(nowLeft-objLeft)*options.zoom;
nowTop=(nowTop-objTop)*options.zoom;
$("img",$(".gysFdjBox[" + fdAttr + "=" + fdCount + "]")).css({ "margin-top": -nowTop + "px", "margin-left": -nowLeft + "px" });
});
});
objFdjcamera.on("mouseleave", function () {
$(document).off("mousemove");
objFdjcamera.hide();
$(".gysFdjBox["+fdAttr+"="+fdCount+"]").hide();
});
}
})(jQuery);

CSS代码:

.test{ width:300px;height:400px; overflow:hidden;}

HTML代码:

<div class="test"><img src="../img/x.jpg"  alt="小图"/></div>

插件的调用:

$(function () {
$(".test").gysFdj({ zoom: 2 });                      });