自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)
这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的.
先看效果图:
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放大镜插件效果(一)(采用一张大图和一张小图片的思路)的更多相关文章
- 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)
废话不多说,先看效果图,和上一章节用的是同一个小图片: 这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多 插件代码: ; (fun ...
- Jquery放大镜插件---imgzoom.js(原创)
Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...
- jquery放大镜插件与样式
这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...
- jQuery放大镜插件jqzoom使用
源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...
- 批发网加盟页面轮播Jquery jcarousellite插件效果
Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev" ...
- 玉渊潭赏樱花有感:从无到有写一个jQuery开源插件
“玉渊潭公园樱花节”是每年樱花绽放时,都会在玉渊潭公园樱举办樱花节,游客前往玉渊潭公园,可以欣赏到20个品种2000株樱花.2016玉渊潭樱花节时间:3月中旬-4月中旬观赏最佳,2016年3月23日开 ...
- jQuery放大镜插件
(function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...
- 自己写的jQuery颜色插件
界面效果: 插件js代码: ;(function ($) { //122种颜色 var aColors = [ "ff0000", "ffff00", &quo ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
随机推荐
- [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 ...
- MySQL主从数据库配置
使用工具 MySQL数据版本:5.6.36-log. 两台云服务器(Linux系统) 首先,需要在Linux系统下安装MySQL,具体步骤可以参考这里,并且确保两台主机可以相互访问,可以直接ping一 ...
- mysql安装错误解决办法
在我们装mysql数据库时,出现安装失败是一件非常令人烦恼的事情,接下来小编就给大家带来在我们安装mysql数据库失败的一些解决方法,感兴趣的小伙伴们可以参考一下 mysql数据库安装不了了!my ...
- ACM常用算法
数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 一维线段树 二维 ...
- (精)AVL树旋转共8种情况(涵盖所有考研的范围)
- oracle 日期时间函数
ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 ...
- 命令行net time同步时间(内网)
首先还是推荐大家使用Internet时间来同步自己计算机的时间,这样做主要是方便,就是设置一个ntp服务器,我推荐下面的三个ntp服务器地址. time.asia.apple.com //亲测有效 a ...
- css 通用兄弟选择器( ~ )
stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...
- nginx定制header返回信息模块ngx_headers_more
http://www.ttlsa.com/nginx/nginx-custom-header-to-return-information-module-ngx_headers_more/ 一. 介绍n ...
- Oracle根据表的大小排序SQL语句
--按照数据行数排序select table_name,blocks,num_rows from dba_tables where owner not like '%SYS%' and table_n ...