自己写的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 }); });
自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)的更多相关文章
- 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)
这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的. 先看效果图: html代码: < ...
- 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 jcarousellite插件效果
Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev" ...
- 玉渊潭赏樱花有感:从无到有写一个jQuery开源插件
“玉渊潭公园樱花节”是每年樱花绽放时,都会在玉渊潭公园樱举办樱花节,游客前往玉渊潭公园,可以欣赏到20个品种2000株樱花.2016玉渊潭樱花节时间:3月中旬-4月中旬观赏最佳,2016年3月23日开 ...
- jQuery放大镜插件jqzoom使用
源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...
- jQuery放大镜插件
(function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...
- 自己写的jQuery颜色插件
界面效果: 插件js代码: ;(function ($) { //122种颜色 var aColors = [ "ff0000", "ffff00", &quo ...
- Jquery相册插件(开源下载)
一,导言 上次 “不定义JQuery插件,不要说会JQuery” 的博客写的肤浅,漏洞百出,而且最重要的是从理论上说如何定义一个jQuery插件,没有实质性的写一个jQuery插件出来,这未免是纸上谈 ...
随机推荐
- Android RIL的java框架
Android RIL的Java部分也被分为了两个模块,RIL模块与Phone模块.其中RIL模块负责进行请求以及相应的处理,它将直接与RIL的原声代码进行通信.而Phone模块则向应用程序开发者提供 ...
- macOS 使用brew安装mysql,客户端连接不上
macos 使用brew安装mysql8.0后,使用mysql官方的workbench连接不上,出现√ mysql8.0 Authentication plugin 'caching_sha2_pas ...
- 获取当前进程目录 GetCurrentDirectory() 及 获取当前运行模块路径名GetModuleFileName()
GetCurrentDirectory 获得的是当前进程的活动目录(资源管理器决定的),可以用SetCurrentDirectory 修改的. 转自 http://m.blog.csdn.net/bl ...
- ubuntu vsftpd
With a bit of playing around I've managed to come up with a semi solution (not perfect but good enou ...
- SVM核技巧之终极分析
参考文献: http://www.blogjava.net/zhenandaci/archive/2009/03/01/257237.html http://www.cnblogs.com/jerry ...
- TensorBoard 实践 1
从新查看图的时候,删除旧的logs/下面的文件 tf.scalar_summary('loss',self.loss) AttributeError: 'module' object has no a ...
- STM32 用c语言控制4个LED灯从左向右无限流动
在用c语言写LED流水灯的前提条件是配置好其他环境,这里我就不说环境了, 想让LED灯无限循环时,首先要想到的是无限循环函数,我这里利用的是for函数 无限循环. #include "stm ...
- 任务02——安装 Intellj IDEA,编写一个简易四则运算小程序,并将代码提交到 GitHub
github地址:https://github.com/ErhuoHome/First.git 安装jdk与intellij idea没有太大问题,以前安装过eclipse 在程序方面,由于对真分数的 ...
- [转载]redis持久化的两种操作RDB和AOF
Redis 持久化: 提供了多种不同级别的持久化方式:一种是RDB,另一种是AOF. RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AO ...
- JPQL详解
JPA在说jpql之前必须要说一下什么是JPA,否则在后续学习的时候,你会弄混的.JPA是一种规范,什么是规范呢,规范就是一个钥匙可以开这把锁.一般对于规范来说我们都是用接口,如果有人要我们则实现我们 ...