Compile the jQuery extension magnifier by yourself.

Compile the jQuery extension magnifier by yourself.

I wrote this plug-in because I saw this application on a site some time ago. I thought it was quite interesting and I wanted to implement it myself. After I checked the information on the Internet, I learned from other people's code, the implementation is as follows. Let's take a look:

　　

1.> thumbnail

　　

　　

2.> big image (the actual size is larger than the figure below. The figure below shows the small size of my screenshot)

　　

 

3.> magnifiers

　　

The third figure is the magnifier effect. The two pictures are also copied from other websites, give site URL: http://www.cunqianguan.me/

You can directly access this website to see the actual effect. I hope the Webmaster will not mind .....

 

The plugin implementation code is as follows:

(Function () {$. fn. magniier = function (options) {// default parameter setting var settings = {diameter: 150, // the diameter of the Magnifier. borderWidth: 2, // the size of the Magnifier border. borderColor: "white", // magnifier border color backgroundImg :".. /img/111.jpg" // image in the magnifier (larger image)}; // merge the parameter if (options) $. extend (settings, options); // chained principle return this. each (function () {// store the current object var root =$ (this); // var WRoot = root of the current object width and height. width (); var HRoot = root. height (); // offset left And top var offset = root. offset (); // magnifier style var style = "background-position: 0px 0px; background-repeat: no-repeat; float: left;"; style + = "position: absolute; box-shadow: 0 0 5px #777, 0 0 10px # aaa inset; display: none; "; style + =" width: "+ String (settings. diameter) + "px; height:" + String (settings. diameter) + "px;"; style + = "border-radius:" + String (settings. diameter/2 + settings. borderWidth) + "Px;"; style + = "border:" + String (settings. borderWidth) + "px solid" + settings. borderColor + ";"; // create a magnifier var magniier =$ ("<div style = '" + style + "'> </div> "). appendTo (root. parent (); // image (small image itself when there is no large image) var backgroundImg = settings. backgroundImg? Settings. backgroundImg: root. attr ("src"); // put the image in a magnifier magniier.css ({backgroundImage: "url ('" + backgroundImg + "')"}); // zoom ratio var WRatio = 0; // width var HRatio = 0; // height // After the image is loaded, calculate the zoom ratio // because the image is not in the DOM document, therefore, the load event is not triggered when the page is loaded. Therefore, you need to execute appendTo to trigger the load event $ (" "). load (function () {WRatio = $ (this ). width ()/WRoot; HRatio = $ (this ). height ()/HRoot ;}). appendTo (root. parent (); // the magnifier and its background image Position control function Position (e) {var LPos = parseInt (e. pageX-offset. left); var TPos = parseInt (e. pageY-offset. top); // determines whether the mouse is on the image. if (LPos <0 | TPos <0 | LPos> WRoot | TPos> HRoot) {magniier. hide (); // do not hide the magnifier} else {magnifier. show (); // display the magnifier on the contrary // control the position of the background image in the magnifier (settings. diameter/2) radius LPos = String (e. pageX-offset. left) * WRatio-settings. diameter/2) * (-1); TPos = String (e. pageY-offset. top) * HRatio-settings. diameter/2) * (-1); magnifier.css ({backgroundPosition: LPos + 'px '+ TPos + 'px '}); // control the position of the magnifier itself. LPos = String (e. pageX-settings. diameter/2); TPos = String (e. pageY-settings. diameter/2); magnifier.css ({left: LPos + 'px ', top: TPos + 'px'}); }}// magnifiers. mousemove (Position); // The current object root. mousemove (Position );});};})();

 

Implementation principle:

Two images, a small image and a big image are used here. Set the large image as a magnifying glass background image. When you move the mouse over the small image, you can also control the position of the large image in the magnifier. The two images must have an equal proportion in size to achieve the best effect. When there is no larger image, the default value is the small image itself. Because the two images are of the same size, the magnifier effect is not obvious, which is the same as that without amplification.

 

This plug-in uses html5 and css3 attributes. ie8 and earlier versions are incompatible and the magnifiers are square.

 

The instance DEMO is as follows:

<! DOCTYPE html> <! -- Thumbnail -->  </div> <script src = ".. /Scripts/jquery-1.4.1.min.js "type =" text/javascript "> </script> <script src = ".. /Scripts/jquery. similar. magnifier. js "type =" text/javascript "> </script> <script type =" text/javascript ">$ (" # img_02 "). magnifier (); </script> </body> 
 
Leave a message if you don't understand anything. It's over 12 o'clock. It's sleepy ....

Jquery extension zoom magnifiers
You change the size of xzoom and yzoom,

Which one can give me an instance of the JQUERY image magnifier plug-in ASPNET20?
Try to enlarge the image
Move the mouse up to display the enlarged image
The tutorials and source code are provided.
Reference: www.blueidea.com/..20.11843