JQuery plug-in's article image pop-up amplification effect, jquery plug-in pop-up amplification effect

JQuery plug-in's article image pop-up amplification effect, jquery plug-in pop-up amplification effect

First, write a basic format:

$.fn.popImg = function() {    //your code goes here}

Then wrap your code with a self-called anonymous function and pass the system variables to the plug-in the form of variables, as shown below:

;(function($,window,document,undefined){    $.fn.popImg = function() {      //your code goes here    }})(jQuery,window,document);

Next, click the article image to bring up the image and enlarge it.

The overall code is as follows:

; (Function ($, window, document, undefined) {$. fn. popImg = function () {// create a pop-up layer var $ layer = $ ("<div>" placement .css ({position: 'fixed', left: 0, right: 0, top: 0, bottom: 0, width: '000000', height: '000000', zIndex: 100%, display: 'none', background: "#000", opacity: '0. 6'}); // copy the clicked image to obtain the width and height of the image and the position var cloneImg = function ($ targetImg) {var cloneW = $ targetImg. width (), cloneH = $ targetImg. height (), left = $ targetImg. offset (). left, top = $ targetImg. offset (). top; return response targetimg.clone().css ({position: 'fixed', width: cloneW, height: cloneH, left: left, top: top, zIndex: 10000000 });}; // center the copied image with var centerImg = function ($ cloneImg) {var dW = $ (window ). width (); var dH = $ (window ). height (); $cloneImg.css ('cursor ', 'zoom-out '). attr ('clone-bigImg ', true); var img = new Image (); img. onload = function () {$ cloneImg. stop (). animate ({width: this. width, height: this. height, left: (dW-this. width)/2, top: (dH-this. height)/2}, 300);} img. src = $ cloneImg. attr ('src');}; this. each (function () {iterator (this).css ('cursor ', 'zoom-in '). on ('click', function () {var $ body = $ ("body"); $ layer. appendTo ($ body); $ layer. fadeIn (300); var $ c = cloneImg ($ (this); $ c. appendTo ($ body); centerImg ($ c) ;}); var timer = null; $ (window ). on ("resize", function () {$ ("img [clone-bigImg]"). each (function () {var $ this = $ (this); timer & clearTimeout (timer); timer = setTimeout (function () {centerImg ($ this );}, 10) ;}); $ (window ). on ("click keydown", function (evt) {if (evt. type = "keydown" & evt. keyCode = 27) {$ layer. fadeOut (300); $ ("img [clone-bigImg]"). remove ();} var $ this = require (evt.tar get); if ($ this. attr ("clone-bigImg") {$ layer. fadeOut (300); $ ("img [clone-bigImg]"). remove () ;}}) ;}} (jQuery, window, document );

Reference: http://barretlee.com/blog/2015/09/19/jquery-plugin-for-alert-img/