JQuery equal scaling zoom Image Instance code

We will tell you two things:

1. Known picture size

The code is as follows	Copy Code
<div id= "Demo1" > </div>

When the page loads the picture contains the attribute width and the height value, you can use a few simple jquery code implementations such as scaling.

The code is as follows

Copy Code

$ (function () { var w = $ ("#demo1"). width ();//container widths $ ("#demo1 img"). each (function () {//If there are many pictures, we can use each () to traverse var img_w = $ (this). width ();//Picture widths var Img_h = $ (this). Height ();//Picture Heights if (img_w>w) {//If the picture is wider than the width of the container-it's going to burst. var height = (w*img_h)/img_w; Height ratio Scaling $ (this). css ({"width": w, Height: height})//set width and height after scaling } }); });

2. Unknown picture size

When the page load picture size is not known, the above code can not be effectively scaled, this situation more than the current collection of external linked pictures.

The code is as follows	Copy Code
<div id= "Demo2" > </div>

In this way, we can not achieve jquery, a friend of the following wrote a good solution to the knowledge of the picture and other proportional scaling effect

The Imgready can be adapted across browsers in Dom ready, without waiting for an IMG load, as follows:
(3-17 repair Netizen crossyou points out a mistake, and the new version removed the replacement picture)

The code is as follows

Copy Code

(function ($) { Detect whether css2.1 Max-width properties are supported var ismaxwidth = ' maxwidth ' in Document.documentElement.style, Detect if IE7 browser IsIE7 =!-[1,] &&! (' prototype ' in Image) && ismaxwidth; $.fn.autoimg = function () { var maxwidth = This.width (); Return this.find (' img '). Each (function (I, IMG) { Use this if you support the Max-width property, otherwise use the following method if (ismaxwidth) return img.style.maxWidth = maxwidth + ' px '; var src = img.src; Hide Artwork Img.style.display = ' None '; Img.removeattribute (' src '); Adjust picture immediately after getting picture header dimension Data Imgready (src, function (width, height) { Reduction in equal proportions if (Width > maxwidth) { Height = maxwidth/width * height, width = maxwidth; Img.style.width = width + ' px '; Img.style.height = height + ' px '; }; Show artwork Img.style.display = '; Img.setattribute (' src ', src); }); }); }; IE7 zoom image will be distorted, using private property through three interpolation solution IsIE7 && (function (c,d,s) {s=d.createelement (' style ');d. getElementsByTagName (' head ') [0].appendchild (s); s.stylesheet&& (s.stylesheet.csstext+=c) | | S.appendchild (D.createtextnode (c))}) (' img {-ms-interpolation-mode:bicubic} ', document); /** * Picture header Data Load Ready event * @param {String} picture path * @param {Function} dimensions are ready (parameter 1 receives width; parameter 2 receives height) * @param {Function} is loaded (optional. Parameter 1 receive width; parameter 2 receive height) * @param {Function} load error (optional) */ var Imgready = (function () { var list = [], intervalid = null, Used to execute queues tick = function () { var i = 0; for (; i < list.length; i++) { List[i].end? List.splice (i--, 1): List[i] (); }; !list.length && Stop (); }, Stop all timer queues stop = function () { Clearinterval (Intervalid); Intervalid = null; }; return function (URL, ready, load, error) { var check, width, height, newwidth, Newheight, img = new Image (); img.src = URL; If the picture is cached, the cached data is returned directly if (img.complete) { Ready (Img.width, img.height); Load && Load (img.width, img.height); Return }; Detect changes in picture size width = img.width; Height = img.height; Check = function () { Newwidth = Img.width; Newheight = Img.height; if (newwidth!== width | | | newheight!== Height | | If the picture has been loaded elsewhere, the usable area can be detected Newwidth * newheight > 1024 ) { Ready (Newwidth, newheight); Check.end = true; }; }; Check (); Events after loading errors Img.onerror = function () { Error && error (); Check.end = true; img = img.onload = Img.onerror = null; }; Fully Loaded Events Img.onload = function () { Load && Load (img.width, img.height); !check.end && Check (); IE gif animation will loop to execute onload, empty onload can be img = img.onload = Img.onerror = null; }; To join a queue for periodic execution if (!check.end) { List.push (check); Reduces browser performance loss whenever only one timer is allowed if (intervalid = = null) Intervalid = SetInterval (tick, 40); }; }; })(); }) (JQuery);

Call method

code is as follows	copy code
Invoke Demo: $ (' # Demo P '). Autoimg ()