Recently learning JS OOP, so I wrote this thing.
How to use:
$ (". Viewarea img"). Zoom ({height:74,width:103});
Effect Demo:
Http://demo.jb51.net/html/jquery_img/jquery_img.htm
Code:
Copy Code code as follows:
(function ($) {
$.fn.zoom = function (settings) {
Some default configurations;
Settings = $.extend ({
height:0,
width:0,
Loading: "Lightbox-ico-loading.gif"
},settings);
var images = this;
$ (images). Hide ();
var loadding = new Image ();
Loadding.classname= "Loadding"
LOADDING.SRC = settings.loading;
$ (images). After (loadding);
Pre-loading
var preload = function ($this) {
var img = new Image ();
IMG.SRC = $this. src;
if (img.complete) {
Processimg.call ($this);
Return
}
$this. src = loadding.src;//causes the wrong size to be obtained
Img.onload = function () {
$this. src = this.src; Will cause the error to get the size
Processimg.call ($this);
Img.onload=function () {};
}
}
Calculate picture size;
function processimg () {
if (settings.height===0| | Settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width-settings.width;
if (m>n)
This.height = This.height>settings.height? Settings.height:
This.height;
Else
This.width = This.width >settings.width? Settings.width:
This.width;
$ (this). Next (". Loadding"). Remove ()
$ (this). Show ();
}
return $ (Images). each (function () {
Preload (this);
});
}
}) (JQuery);
The effect is this:
