自己编写jQuery插件 之 放大镜
一. 效果图
二. 原理讲解
1. 用到了两张图片,一张小图,一张大图。
2. 小图用于直接在页面上显示,大图则用于放大镜内显示
3. 放大镜实际是一个div,而大图则是这个div的背景图
4. 小图与大图是等比例的,从而达到最佳放大效果
5. 当没设置大图时,则大图为小图本身,此种情况放大效果不明显,相当于没放大一样
6. 这里借助于鼠标移动事件(即:mousemove),通过鼠标在小图上的移动坐标 和 大小图的比例(比例计算得来),从而计算出放大镜内的背景图对应的坐标位置。
三. 插件实现代码
(function () {
$.fn.magnifier = function (options) { //默认参数设置
var settings = {
diameter: 150, //放大镜的直径大小
backgroundImg: "img/larger.jpg" //放大镜内的图片(即大图)
}; //合并参数
if (options){
$.extend(settings, options);
} //链式原则
return this.each(function () { var root = $(this), //存储当前对象
wRoot = root.width(), //当前对象宽
hRoot = root.height(), //当前对象高
offset = root.offset(), //偏移量 left 和 top
magnifier = $(".magnifier"), //放大镜对象
wRatio = 0, //缩放比率-宽度
hRatio = 0, //缩放比率-高度
backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src"); //大图(当没有大图时,为小图本身) //设置放大镜样式
magnifier.css({
width : settings.diameter+"px",
height : settings.diameter+"px",
borderRadius : (settings.diameter / 2) + "px",
backgroundImage: "url('" + backgroundImg + "')" }); //将图片放入放大镜内 /* 图片加载完,计算缩放比例
* 由于图片原本不在DOM文档里,
* 因此页面加载时不会触发load事件,
* 因此要通过执行appendTo来触发load事件 */
$("<img style='display:none;' src='" + backgroundImg + "' />").load(function () {
wRatio = $(this).width() / wRoot;
hRatio = $(this).height() / hRoot;
}).appendTo(root.parent()); //放大镜及其背景图片位置控制
function _position(e) { var lPos = parseInt(e.pageX - offset.left),
tPos = parseInt(e.pageY - offset.top); //判断鼠标是否在图片上
if (lPos < 0 || tPos < 0 || lPos > wRoot || tPos > hRoot) { magnifier.hide(); //不在隐藏放大镜 } else { magnifier.show(); //反之显示放大镜 //控制放大镜内背景图片的位置 (settings.diameter / 2)半径
lPos = ((e.pageX - offset.left) * wRatio - settings.diameter / 2) * (-1);
tPos = ((e.pageY - offset.top) * hRatio - settings.diameter / 2) * (-1); magnifier.css({ backgroundPosition: lPos + 'px ' + tPos + 'px' }); //控制放大镜本身位置
lPos = e.pageX - settings.diameter / 2;
tPos = e.pageY - settings.diameter / 2; magnifier.css({ left: lPos + 'px', top: tPos + 'px' });
}
} //放大镜
magnifier.mousemove(_position); //当前对象
root.mousemove(_position); });
};
})();
四. Html结构
<div class="box">
<img src="img/small.jpg" id="img-small" width="500" height="333" /> <!-- 小图 -->
<div class="magnifier"></div> <!-- 放大镜div (上一个版本此div是直接定义在js里面的) -->
</div>
五. 放大镜样式
/*放大镜样式*/
.magnifier{
background-position: 0px 0px;
background-repeat: no-repeat;
position: absolute;
box-shadow: 0 0 5px #777, 0 0 10px #aaa inset;
display: none;
width: 150px;
height: 150px;
border-radius: 75px;
border:2px solid #FFF;
cursor: none;
}
之前放大镜及其样式都是写在js代码里面的,为了做到更好的分离,所以此次修改后将放大镜div和css样式抽出来了。
六. 使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery放大镜插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<h2 class="title">jQuery放大镜插件</h2> <div class="box">
<img src="img/small.jpg" id="img-small" width="500" height="333" /> <!-- 小图 -->
<div class="magnifier"></div> <!-- 放大镜div -->
</div> <script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.similar.magnifier.js"></script>
<script type="text/javascript">
$("#img-small").magnifier();
</script>
</body>
</html>
自己编写jQuery插件 之 放大镜的更多相关文章
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- 编写jQuery插件(一)——插件约定及插件中的闭包
编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jque ...
- 自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
- 编写jQuery插件的方法和注意点
编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...
- 如何编写JQuery 插件详解
转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...
- 如何用正确的姿势编写jQuery插件
在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在 ...
- 如何编写jQuery插件
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- 编写jQuery 插件
编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...
随机推荐
- Vue+Flask看这篇就够了
一.项目目录结构 使用Vue+Flask搭建前后端分离的基础平台. my_project/ app/ //vue目录 static/ models/ remplates/ 404.html index ...
- 模仿 AppStore 顶部动画
App Store 顶部动画 App Store 中 Games.Apps.Updates 的顶部动画的特点: 自然状态下是大标题,右边有一个 button 顶上去时,变成小标题,右边按钮消失 导航栏 ...
- Django的常用方法以及配置
在setting 中配置能生成 sql log 的内容 LOGGING = { , 'disable_existing_loggers': False, 'handlers': { 'console ...
- Linux CentOS7系统探索
这两天,突发奇想,想着用着微软家的windows系统很多年了,也想尝试一下其他的操作系统.很快的就想到了Linux操作系统,它不是面向用户的,而是面向服务器的,在服务器端的市场中占了很大的市场份额,备 ...
- (转)python高级:列表解析和生成表达式
一.语法糖的概念 “糖”,可以理解为简单.简洁,“语法糖”使我们可以更加简洁.快速的实现这些功能. 只是Python解释器会把这些特定格式的语法翻译成原本那样复杂的代码逻辑 我们使用的语法糖有: if ...
- C++ STL 初探
学过C++的人肯定会很熟悉STL标准模板库,STL其实就是封装了一系列的接口,供我们调用.很多函数或者算法的实现不需要我们从头开始写,大大提高我们的编程效率.这篇博客在简单介绍STL的情况下,会详细的 ...
- Builder生成器(创建型模式)
一.使用场景: 1.假设要创建一个House设施,该设施的创建由若干个部分组成,而且这若干个部分经常变化. 如果用最直观的设计方式,每一个房屋部分的变化,都将导致整个房屋结构的重新修正,但是这种设计方 ...
- Java学习之路(九):Map集合
Map集合概述和特点 Map是属于java.util的一个接口Map<k,v> k:映射所维护的键的类型 v:映射值的类型 Map是将键映射到值的对象.一个映射不能包含重复的键:每个键最多 ...
- go语言的unsafe包(转)
The unsafe Package in Golang Golang的unsafe包是一个很特殊的包. 为什么这样说呢? 本文将详细解释. 来自go语言官方文档的警告 unsafe包的文档是这么说的 ...
- 解决nginx访问问题connect() to 127.0.0.1:8080 failed (13: Permission denied) while connecting to upstream,
问题:搭建好项目之后,用nginx进行代理,进行日常配置之后,发现前端正常访问,但是后端访问出现错误,报502错误,查找nginx日志,发现connect() to 127.0.0.1:8080 fa ...