To adapt local images, remote images, and small images to this plug-in, there are many details to solve.
First, define the structure:
Then consider image pre-loading:
Copy to ClipboardReference: [www.bkjia.com] $. imgploader = function (url, eventLists ){Then calculate the sensing region:
The four sides of the sensor area of the thumbnail minus the rectangle of 1/2 indicating the four sides of the box. The area outside of this area shows the border of the large image:
Problems caused by using a large image as a background image:
Pre-load the hidden foreground image and determine the time when the load event occurs. ie and chrome are normal. ff requests the image twice and the image is not cached;
In another way, do not preload the large image. After the overlay layer is used for "loading" directly in the big image position, chrome will show a progressive loading of images. If it is not chrome, it will be displayed directly, with a slight regret.
The final result is to use the big image as a foreground image:
The advantage is that the load and error events in the big image can work normally:
The load event and the mousemove event of the large image are not synchronized. Solution: store the mouse coordinates in real time and separate the box positioning and the big Image Positioning method.
Copy to ClipboardReference content: [www.bkjia.com] // mouse location StorageIf there is a browser, you may be lucky.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = gbk "/> <title> imgMagnifier-bkjia.com </title> <style type =" text/css "> * {margin: 0; padding: 0; border: none;} body {width: 60em; padding-left: 5em;} ul {padding: 1em 0 5em 1em; list-style: georgian inside;} pre {background-color: rgb (248,248,232);}. imgMagnifier {}. imgMagnifier img {/* width: 300px; height: 200px ;*/}. imgMagnifierWrap * {position: absolute; background: # fff ;}. imgMagnifierWrap. tipboxHover {width: 80px; height: 60px; filter: alpha (opacity = 30); opacity :. 3; display: none ;}. imgMagnifierWrap. imgOriginal {display: none; z-index: 9999; overflow: hidden; width: 400px; height: 400px; background-color: # cdf; background-repeat: no-repeat; text-align: center; border: 1px solid #555 ;}. imgMagnifierWrap. overlay {cursor: crosshair; filter: alpha (opacity = 0); opacity: 0 ;}</style> <script src =" http://www.bkjia.com/ Uploads/Common/jquery-1.3.2.min.js "type =" text/javascript "> </script> <script type =" text/javascript "src =" http://www.bkjia.com/ Uploads/Common/js/jquery. chili-2.2.js "> </script> <script type =" text/javascript "src =" http://www.bkjia.com/ Uploads/Common/js/recipes. js "> </script> <script type =" text/javascript ">$ (function () {ChiliBook. recipeFolder =" http://www.bkjia.com/ ? Demos "; $ ('pre> Code '). chili () ;}); </script> <script type = "text/javascript"> (function ($) {$. imgPreloader = function (url, eventLists) {var img = new Image (); var $ img = $ (img); img. src = url; $. each (eventLists, function (type, fn) {$ img. bind (type, fn) ;}); $ img. trigger (img. complete? 'Load': 'begin'); return $ img;}; $. fn. imgPreloader = function (url, eventLists) {return this. each (function () {$ (this ). append ($. imgPreloader (url, eventLists. fn. imgmagniier = function (options) {return this. each (function () {var cfg = $. extend ({width: 500, height: 500, left: 12}, options | |{}); var $ anchor = $ (this ); var $ thumb = $ ('img ', this); var $ wrap = $ (' <div> '). addClass ('imgmagnifierwrap '). appendTo ('body'); var $ tipb Ox = $ ('<div> '). addClass ('tidboxhover '). appendTo ($ wrap); // small image size and coordinate storage var thumbInfo = {height: $ thumb. outerHeight (), width: $ thumb. outerWidth (), left: $ thumb. offset (). left, top: $ thumb. offset (). top}; // It is compatible and transparent with large masks such as small graphs. It saves the trouble of var $ overlay =$ ('<div> '{.addclass('overlay'}.css (thumbInfo ). appendTo ($ wrap); // indicates the size of the box to be hashed. var tipboxInfo = {width: $ tipbox. width (), height: $ tipbox. height ()}; // loads a large image. The default value is var $ o =$ ('<div>') on the right '). addClass ('I Mgoriginal'{.appendto({wrap}.css ({top: thumbInfo. top, left: thumbInfo. left + thumbInfo. width + cfg. left, width: cfg. width, height: cfg. height, lineHeight: cfg. height + 'px '}); // calculated by the sensing area (the four sides of the sensing area of the small image minus 1/2 of the four sides of the box) var borderLeft = thumbInfo. left + tipboxInfo. width/2; var borderTop = thumbInfo. top + tipboxInfo. height/2; // The mouse position storage, used to solve the problem of the load event pre-loaded by the big image and the mousemove event not synchronized on the small graph var mouseInfo = {x: 0, y: 0}; // The indicator box locates var setTipboxPosition = functio N(e%{mouseinfo.x%e.pagex%mouseinfo.y%e.pagey%%tipbox.css ({top: mouseInfo. y <thumbInfo. width/2 + thumbInfo. top? Math. max (mouseInfo. the y-tipboxInfo.height/2, thumbInfo. top): Math. min (mouseInfo. the y-tipboxInfo.height/2, thumbInfo. top + thumbInfo. height-tipboxInfo.height (), left: mouseInfo. x <thumbInfo. width/2 + thumbInfo. left? Math. max (mouseInfo. the x-tipboxInfo.width/2, thumbInfo. left): Math. min (mouseInfo. the x-tipboxInfo.width/2, thumbInfo. left + thumbInfo. width-tipboxInfo.width)}); setImgPosition () ;}; // The image automatically adapts to var autoFitPicture = function () {var $ I = $ o. children ('img '); if ($ I. length & $ I. width ()> 0) {if ($ I. width () <cfg. width) {cfg. width = $ I. width (); $ o. width (cfg. width);} if ($ I. height () <cfg. height) {cfg. height = $ I. height (); $ o. height (cfg. heweigh T) ;}setimgposition () ;};// var setImgPosition = function () {// calculate the proportional coordinate var ratioX = (mouseInfo. x-borderLeft)/(thumbInfo. width-tipboxInfo.width); var ratioY = (mouseInfo. y-borderTop)/(thumbInfo. height-tipboxInfo.height); // according to the effective sensing range (0 ~ 100%) Quickly filter ratioX = ratioX <0? 0: ratioX> 1? 1: ratioX; ratioY = ratioY <0? 0: ratioY> 1? 1: ratioY; var polici=o.children('img'{{{ I .css ({left:-($ I. width ()-cfg. width) * ratioX, top:-($ I. height ()-cfg. height) * ratioY}) ;}; var isImageReady = false; $ overlay. data ('ready', false ). bind ('mouseenter mouseleave ', function (e) {if (! IsImageReady & e. type = 'mouseenter') {$. imgPreloader ($ anchor. attr ('href '), {load: function () {isImageReady = true; $ o. empty (). append (this); setTimeout (autoFitPicture, 0) ;}, begin: function () {$ o. text ('loading... ') ;}, error: function () {isImageReady = true; $ o. text ('invalid picture! ') ;}}) ;}$ Tipbox. add ($ o ). toggle ();}). mousemove (setTipboxPosition) ;};}) (jQuery); </script> <script type = "text/javascript" >$ (function () {$ ('a. imgmagniier: eq (0 )'). imgMagnifier ({width: 400}); $ ('a. imgmagniier: eq (1 )'). imgMagnifier (); // $ ('a. imgmagniier: eq (2 )'). imgMagnifier ({width: 300, height: 500, left: 30 });}); </script>
Tip: the code can be modified before running!
Article from: http://www.cnblogs.com/ambar/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
