国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

jQuery實現文章圖片彈出放大效果

2019-11-19 16:54:39
字體:
來源:轉載
供稿:網友

首先先搭寫一個基本的格式:

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

然后用自調用匿名函數包裹你的代碼,將系統變量以變量形式傳遞到插件內部,如下:

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

那么接下來我們就在里面實現點擊文章圖片彈出該圖片并放大的效果。

整體代碼如下:

;(function($,window,document,undefined){ $.fn.popImg = function(){   //創建彈出層   var $layer = $("<div>").css({    position:'fixed',    left:0,    right:0,    top:0,    bottom:0,    width:'100%',    height:'100%',    zIndex:9999999,    display:'none',    background: "#000",    opacity:'0.6'   });   //復制點擊的圖片,獲得圖片的寬高以及位置   var cloneImg = function($targetImg){     var cloneW = $targetImg.width(),       cloneH = $targetImg.height(),       left = $targetImg.offset().left,       top = $targetImg.offset().top;     return $targetImg.clone().css({       position:'fixed',       width:cloneW,       height:cloneH,       left:left,       top:top,       zIndex:10000000     });   };   //讓復制的圖片居中顯示   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(){     $(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 = $(evt.target);   if($this.attr("clone-bigImg")){    $layer.fadeOut(300);    $("img[clone-bigImg]").remove();   }  }); }})(jQuery,window,document);

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持武林網!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 阜康市| 汽车| 禄丰县| 屯留县| 英山县| 太谷县| 新竹县| 崇明县| 绿春县| 金堂县| 三原县| 芦溪县| 富民县| 阜城县| 茶陵县| 冕宁县| 拜城县| 浑源县| 札达县| 碌曲县| 安达市| 安泽县| 泽普县| 高青县| 安图县| 石河子市| 志丹县| 分宜县| 洪湖市| 临安市| 武安市| 莱芜市| 清镇市| 彭山县| 固安县| 元谋县| 板桥市| 巴南区| 古浪县| 喀喇沁旗| 呼图壁县|