Magnifier plug-in based on jquery _ jquery

This article describes in detail the magnifier plug-in based on jquery, which has some reference value, if you are interested, you can refer to the examples in this article to share your own jquery magnifier plug-in for your reference. The specific content is as follows:

/*************************************** * ********** Instructions for using this plug-in --------------- ***** filter (inner) the ratio of movequ to the active area must be equal to that of the * enlarged area (movequ) and the internal image. If the ratio is not ***, change the image size. ---------------------- *** parameter introduction *** active: Filter activity Zone *** inner: Filter *** movequ: to enlarge the area ***** you need to introduce this js script and jquery-1.8.3 script in the Html header **** if you have any questions, please contact QQ: 64047399, to answer your questions ************************************** * ************/$. fn. extend ({yangbo: function (active, inner, movequ) {$ (active ). hover (function () {$ (inner ). show (); $ (movequ ). show (); var proportionOne =one (active ). width ()/$ (inner ). width (); var proportionTwo = $ (movequ ). find ('img '). width ()/$ (movequ ). width (); // console. log ($ (movequ ). find ('img '). width (); if (proportionOne = proportionTwo) {$ (this ). mousemove (function (event) {// zoom in var proportionLeft =$ (active) on the right ). width ()/$ (inner ). width (); var proportionTop = $ (active ). height ()/$ (inner ). height (); $ (movequ ). scrollLeft ($ (inner ). position (). left * proportionLeft ). scrollTop ($ (inner ). position (). top * proportionTop); // drag the filter below $ (inner ). offset ({left: event. pageX-40, top: event. pageY-40}); // The following is the judgment critical value if ($ (inner ). position (). left <= 0) {response (inner).css ({left: 0})} if ($ (inner ). position (). top <= 0) {detail (inner).css ({top: 0})} if ($ (inner ). position (). left> = $ (this ). width ()-$ (inner ). width () {detail (inner).css ({left: $ (this ). width ()-$ (inner ). width ()} if ($ (inner ). position (). top> = $ (this ). height ()-$ (inner ). height () {detail (inner).css ({top: $ (this ). height ()-$ (inner ). height ()} else {$ (active ). text ('the image width and height are incorrect: Adjust the image width and height --> the ratio of the filter to its father should be equal to the ratio of the right box to the right image '). css ({background: 'yellow', color: 'red',}) ;}}, function () {$ (inner ). hide (); $ (movequ ). hide ();})}})

The above is all the content of this article, hoping to help you learn.