这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的.

先看效果图:

html代码:

 <div class="test"><!--整个放大效果的最外区域.-->
<div class="testOri"><img width="400px" height="250px" src="../img/small.jpg" alt="原图"/></div><!--原始区域,为了更好地兼容各种浏览器,请将图片的宽和高注明-->
<div class="testZoom"><img width="1440px" height="900px" src="../img/big.jpg" alt="放大图"/></div><!--放大区域,为了更好地兼容各种浏览器,请将图片的宽和高注明-->
</div>

js插件代码:

  ; (function ($) {
$.fn.gysFdj = function (options) {
var defaults = {
cameraW: 100, //镜头宽度
cameraH: 100, //镜头高度
cameraBjColor: "#000", //镜头背景色
zoomIndex: 10, //放大框div的层级
cameraOpacity: 0.6, //镜头透明度
zoomPos: 10, //放大框距离源框的位置
cameraIndex: 10//镜头的层级
}
var opt = $.extend({}, defaults, options); //合并参数 if (!opt.ori) { alert("你没有指定源图框"); return; }
if (!opt.zoom) { alert("你没有指定放大框"); return; }
var obj = $(this); //当前最大框对象
if(obj.css("position")=="static"){obj.css("position","relative");}
var objOriDiv = $(opt.ori, obj); //源div
var objOriDivOffset = objOriDiv.offset();
var objOriDivLeft = objOriDivOffset.left; //源框的left
var objOriDivTop = objOriDivOffset.top; //源框的top
var objZoomDiv = $(opt.zoom, obj); //放大的div框
var objOriImg = $("img", objOriDiv); //源图框
var objZoomImg = $("img", objZoomDiv); //放大框
var objOriImgW = objOriImg.width();
var objOriImgH = objOriImg.height();
objOriDiv.width(objOriImgW).height(objOriImgH);
obj.width(objOriImgW).height(objOriImgH); var objOriDivW = objOriDiv.width();
var objOriDivH = objOriDiv.height();
var cameraMaxLeft = objOriDivW - opt.cameraW; //镜头的最大left
var cameraMaxTop = objOriDivH - opt.cameraH; //镜头的做大top var cameraCSs = { width: opt.cameraW, height: opt.cameraH, "background-color": opt.cameraBjColor, opacity: opt.cameraOpacity, filter: "alpha(opacity=" + opt.cameraOpacity * 100 + ")", "position": "absolute", display: "none",cursor: "crosshair", "z-index": opt.cameraIndex }; //镜头css
obj.append("<div class='camera'></div>"); //填充镜头
var objCamera = $(".camera", obj);
objCamera.css(cameraCSs); //添加样式 var zoom = objZoomImg.width() / objOriImgW; //放大倍数
objZoomDiv.width(opt.cameraW * zoom).height(opt.cameraH * zoom).css({ position: "absolute", left: (objOriDivW + opt.zoomPos) + "px", top: "0px", overflow: "hidden", "z-index": opt.zoomIndex, display: "none" }); //设置放大的div框 var nowLeft = 0, nowTop = 0;
objOriDiv.on("mouseover", function () {
objCamera.show(); //显示镜头,
objZoomDiv.show(); //显示放大框
$(document).on("mousemove", function (e) {
nowLeft = e.clientX - objOriDivLeft - opt.cameraW / 2+ $(document).scrollLeft();
nowTop = e.clientY-objOriDivTop - opt.cameraH / 2 + $(document).scrollTop();
if (nowLeft <= 0) nowLeft = 0;
else if (nowLeft >= cameraMaxLeft) nowLeft = cameraMaxLeft; if (nowTop <= 0) nowTop = 0;
else if (nowTop >= cameraMaxTop) nowTop = cameraMaxTop; objCamera.css({ left: nowLeft + "px", top: nowTop + "px" }); //镜头的移动 nowLeft = nowLeft * zoom;
nowTop = nowTop * zoom; objZoomImg.css({ "margin-left": -nowLeft + "px", "margin-top": -nowTop + "px" });
});
}); objCamera.on("mouseout", function (e) {
$(this).hide();
$(document).off("mousemove");
$(opt.zoom, obj).hide();
});
}
})(jQuery);

插件的调用:

  $(function () {
$(".test").gysFdj({ ori: ".testOri", zoom: ".testZoom"});
});

自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)的更多相关文章

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

    废话不多说,先看效果图,和上一章节用的是同一个小图片: 这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多 插件代码: ; (fun ...

  2. Jquery放大镜插件---imgzoom.js(原创)

    Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...

  3. jquery放大镜插件与样式

    这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...

  4. jQuery放大镜插件jqzoom使用

    源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...

  5. 批发网加盟页面轮播Jquery jcarousellite插件效果

    Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

  6. 玉渊潭赏樱花有感:从无到有写一个jQuery开源插件

    “玉渊潭公园樱花节”是每年樱花绽放时,都会在玉渊潭公园樱举办樱花节,游客前往玉渊潭公园,可以欣赏到20个品种2000株樱花.2016玉渊潭樱花节时间:3月中旬-4月中旬观赏最佳,2016年3月23日开 ...

  7. jQuery放大镜插件

    (function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...

  8. 自己写的jQuery颜色插件

    界面效果: 插件js代码: ;(function ($) { //122种颜色 var aColors = [ "ff0000", "ffff00", &quo ...

  9. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. [LeetCode&Python] Problem 463. Island Perimeter

    You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...

  2. MySQL主从数据库配置

    使用工具 MySQL数据版本:5.6.36-log. 两台云服务器(Linux系统) 首先,需要在Linux系统下安装MySQL,具体步骤可以参考这里,并且确保两台主机可以相互访问,可以直接ping一 ...

  3. mysql安装错误解决办法

    在我们装mysql数据库时,出现安装失败是一件非常令人烦恼的事情,接下来小编就给大家带来在我们安装mysql数据库失败的一些解决方法,感兴趣的小伙伴们可以参考一下   mysql数据库安装不了了!my ...

  4. ACM常用算法

    数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 一维线段树 二维 ...

  5. (精)AVL树旋转共8种情况(涵盖所有考研的范围)

  6. oracle 日期时间函数

    ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02   13:45:25为例)           Year:              yy two digits 两位年 ...

  7. 命令行net time同步时间(内网)

    首先还是推荐大家使用Internet时间来同步自己计算机的时间,这样做主要是方便,就是设置一个ntp服务器,我推荐下面的三个ntp服务器地址. time.asia.apple.com //亲测有效 a ...

  8. css 通用兄弟选择器( ~ )

    stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

  9. nginx定制header返回信息模块ngx_headers_more

    http://www.ttlsa.com/nginx/nginx-custom-header-to-return-information-module-ngx_headers_more/ 一. 介绍n ...

  10. Oracle根据表的大小排序SQL语句

    --按照数据行数排序select table_name,blocks,num_rows from dba_tables where owner not like '%SYS%' and table_n ...