脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 废话不多说,先看效果图,和上一章节用的是同一个小图片:
这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多
插件代码:
复制代码
1 ; (function ($) {
2 $.fn.gysFdj = function (options) {
3 VAR defaluts = {
5 cameraH: 100, //镜头高度
6 pointBjColor: "#000", //镜头的背景颜色
7 pointOpacITy: 0.6, //镜头的透明度
9 zoom: 2//放大倍数
10 };
11 options = $.extend(defaluts, options);
12 var obj = $(this);
13 obj.addClass("gysFdjOrigin");
14 var objOriimg=$("img",obj);
15 var objOriImgW=objOriImg.width();
16 var objOriImgH=objOriImg.height();
17 var fdCount = $(".gysFdjOrigin").length;
18 var fdAttr = "fd"; //属性变量
19 obj.attr(fdAttr, fdCount); //添加属性
20 var offset = obj.offset();
21 var objLeft = offset.left; //对象left
22 var objTop = offset.top; //对象top
23 var objWidth = obj.width(); //对象宽度
24 var objHeight = obj.height(); //对象高度
25 //镜头相对box的活动范围
26
27 var cameraMaxLeft = objWidth + objLeft - options.cameraW; //最大左范围
28 var cameraMaxTop = objHeight + objTop - options.cameraH; //最大下范围
29
30 var imgStr = obj.html();
31 var htML = "";
32 html += "<p 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 + "</p>";
33 $("body").apPEnd(html);
34 $("img", $(".gysFdjBox[" + fdAttr + "=" + fdCount + "]")).width(objWidth*options.zoom).height(objHeight*options.zoom);
35 var objFdjcamera = null;
36 if ($("#gysFdjcamera").length == 0) {
37 var pointBlock = "<p 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;'></p>";
38 $("body").append(pointBlock);
39 }
40 objFdjcamera = $("#gysFdjcamera");
41 var nowLeft = 0, nowTop = 0;
42 obj.on(";mouseover", function (event) {
43 objFdjcamera.show().attr(fdAttr, fdCount);
44 $(".gysFdjBox["+fdAttr+"="+fdCount+"]").show();
45 $(document).on("mouSEMove", function (event) {
46 var pointX = event.clientX+$(document).scrollLeft();
47 var pointY = event.clientY+$(document).scrollTop();
48 nowLeft = pointX - options.cameraW / 2;
49 nowTop = pointY - options.cameraH / 2;
50 if (nowLeft <= objLeft) { nowLeft = objLeft; }
51 else if (nowLeft >= cameraMaxLeft) { nowLeft = cameraMaxLeft; }
52 if (nowTop <= objTop) { nowTop = objTop; }
53 else if (nowTop >= cameraMaxTop) { nowTop=cameraMaxTop;}
54 objFdjcamera.css({ left: nowLeft + "px", top: nowTop + "px" });
55 nowLeft=(nowLeft-objLeft)*options.zoom;
56 nowTop=(nowTop-objTop)*options.zoom;
57 $("img",$(".gysFdjBox[" + fdAttr + "=" + fdCount + "]")).css({ "margin-top": -nowTop + "px", "margin-left": -nowLeft + "px" });
58 });
59 });
60 objFdjcamera.on("mouseleave", function () {
61 $(document).off("mousemove");
62 objFdjcamera.hide();
63 $(".gysFdjBox["+fdAttr+"="+fdCount+"]").hide();
64 });
65 }
66 })(jQuery);
复制代码
CSS代码:
1 .test{ width:300px;height:400px; overflow:hidden;}
HTML代码:
1 <p class="test"><img src="../img/x.jpg" alt="小图"/></p>
插件的调用:
1 $(function () {
2 $(".test").gysFdj({ zoom: 2 }); 3 });
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)全部内容，希望文章能够帮你解决javascript代码实例教程-自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。