自己编写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 ...
随机推荐
- AFNetworking 报3840
工作中遇到前后台交互,前端解析不了后端返回的数据格式 ,原因在于没有标准统一的请求格式 这是个坑,但是还是有办法修复 错误提示: Error Domain=NSCocoaErrorDomain Cod ...
- centos 7 初始化脚本
#!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...
- 使用js栈stack类的实现
使用js栈stack类的实现 /*使用栈stack类的实现*/ function stack() { this.dataStore = [];//保存栈内元素,初始化为一个空数组 this.top = ...
- “context:include-filter”与“context:exclude-filter”标签作用解释
注意到spring中<context:component-scan>标签中会出现include和exclude的子标签,具体是做什么用的? spring的配置文件与springmvc的配置 ...
- Python3之hashlib
简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法. 在python3中已经废弃了md5和sha模块,简单说 ...
- 剑指offer四十五之扑克牌顺子（序列是否连续）
一.题目 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
- Mac 下安装node.js（转载）
原文地址:http://blog.csdn.net/u011619283/article/details/52368759 Node.js 简介 Node.js 是一个用Chrome's V8 Jav ...
- IDEA里点击Build，再Build Artifacts没反应，灰色的？解决办法（图文详解）
不多说,直接上干货! 问题详情 如下:点击Build ,再 Build -> Build Artifacts,没反应??? 解决办法 1.File,再Project Structure 2.然后 ...
- 图形学 shader教程推荐
https://www.bilibili.com/video/av37119580 http://edu.manew.com/my/course/96 http://edu.manew.com/my ...
- mongodb 错误 SCRAM-SHA-1 authentication failed for --转
log 日志错误信息 2018-10-24T16:14:42.244+0800 I NETWORK [initandlisten] connection accepted from 192.168.1 ...