jquery plugin --image magnifier 放大器

今天研究了一下jquery plugin --image magnifier 放大器。

原理其实很简单，首先你需要一个大图一个小图（或者是一个图），当在小图中移动，计算位差，把这个位差对应到大图上。

当然你还可以隐藏鼠标。

研究结果如下：

//example
$('selector').loupe({
  width: 200, // width of magnifier
  height: 150, // height of magnifier
  loupe: 'loupe' // css class for magnifier
});

$('#demo-1').loupe();

.loupe {
cursor: url("blank.png"), url("blank.cur"), none;
}
*/

/**
* loupe - an image magnifier for jQuery
* (C) 2010 jdbartlett, MIT license
* http://github.com/jdbartlett/loupe
*/
(function ($) {
   $.fn.loupe = function (arg) {
   var options = $.extend({
   loupe: 'loupe',
   width: 200,
   height: 150
   }, arg || {});

return this.length ? this.each(function () {
   var $this = $(this),
   $big, $loupe, $small = $this.is('img') ? $this : $this.find('img:first'),
   move, hide = function () {
   $loupe.hide();
   },
   time;

if ($this.data('loupe') != null) {
return $this.data('loupe', arg);
}

move = function (e) {
   var os = $small.offset(),
   sW = $small.outerWidth(),
   sH = $small.outerHeight(),
   oW = options.width / 2,
   oH = options.height / 2;

//判断是否越界
   if (!$this.data('loupe') || e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 || e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
   return hide();
   }

time = time ? clearTimeout(time) : 0;

//移动container
   $loupe.show().css({
   left: e.pageX - oW,
   top: e.pageY - oH
   });
   //移动大图片
   $big.css({
   left: -(((e.pageX - os.left) / sW) * $big.width() - oW) | 0,
   top: -(((e.pageY - os.top) / sH) * $big.height() - oH) | 0
   });
   };

//新建大图片的container
   $loupe = $('<div />').addClass(options.loupe).css({
   width: options.width,
   height: options.height,
   position: 'absolute',
   overflow: 'hidden'
   }).append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute')).mousemove(move).hide().appendTo('body');

$this.data('loupe', true).mouseenter(move).mouseout(function () {
   time = setTimeout(hide, 10);
   });
   }) : this;
   };

}(jQuery));

出处：

jquery magnifier http://jdbartlett.com/loupe/
or

http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

jquery plugin --image magnifier 放大器相关推荐

Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
html5 jquery paint plugin,制作高质量的JQuery Plugin 插件的方法
JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插 ...
jQuery 对话框 jQuery.plugin
jQuery 对话框 jQuery.plugin 强烈推荐对话框插件jquery.weebox.js,本站开源账务管理系统中使用的对话框组件,各种形式的对话框:确认.成功.警告.错误等 ---- 如下 ...
jquery --- Poshy Tip jQuery Plugin
2019独角兽企业重金招聘Python工程师标准>>> 作为一个抄袭者---从抄袭开始 jquery我无比的爱你啊提示的插件:Poshy Tip jQuery Plugin 下载地 ...
jQuery ui widget和jQuery plugin的实现原理简单比较
一.创建 1. jQuery plugin (function($){ $.fn.MyPlugin=function(){ //js代码 } })(jQuery) 为了与页面上其他代码友好相处,将p ...
Signs of a poorly written jQuery plugin 翻译 (Jquery插件开发注意事项，Jquey官方推荐)
原文链接:http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ 原文作者:remy sharp So far ...
Jquery plugin template POPUP Plugin
以一个popup 的例子,学习怎么写jquery插件.插件实例化时候包括传属性,函数.类似jqueryUI 的使用感觉. 实现效果类似 android 的 toast 的效果. 显示提示消息,过几 ...
JavaScript text highlighting JQuery plugin
介绍一个JQuery的插件,用来在页面上高亮显示匹配到的字符串. Demo 点击下面的两个链接以查看效果: highlight javascript 点击Remove highlights移除高亮显示 ...
jQuery plugin 开发的一个例子
测试代码: <html> <script src="jquery_1.7.1.js"> </script> <script>jQue ...

jquery plugin --image magnifier 放大器

jquery plugin --image magnifier 放大器相关推荐

最新文章

热门文章