jQuery效果之封装一个文章图片弹出放大效果

前端开发 作者: 2024-08-20 19:35:01
首先先搭写一个基本的格式: 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下: 那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。 整体代码如下: 参考地址:ht
$.fn.popImg = function() {
    //your code goes here
}
;(($,window,document,undefined){
    $.fn.popImg = () {
      your code goes here
    }
})(jQuery,document);
;((){

      创建弹出层
      var $layer = $("<div>").css({
        position:'fixed',left:00'100%'9999999"#000"
      });

      复制点击的图片,获得图片的宽高以及位置
      var cloneImg = ($targetImg){
          var cloneW = $targetImg.width(),cloneH = $targetImg.height(),left = $targetImg.offset().left,top = $targetImg.offset().top;

          return $targetImg.clone().css({
              position:'fixed'
          });
      };

      让复制的图片居中显示
      var centerImg = ($cloneImg){
          var dW = $(window).width();
          var dH = $(window).height();
          $cloneImg.css('cursor','zoom-out').attr('clone-bigImg',true);
          var img = new Image();
          img.onload = (){
            $cloneImg.stop().animate({
                 width: this.width,height: .height,left: (dW - this.width) / 2this.height) / 2
            },300);
          }
          img.src = $cloneImg.attr('src');
      };
      
      this.each((){
          $(this).css('cursor','zoom-in').on('click',1)">(){
              var $body = $("body");
              $layer.appendTo($body);
              $layer.fadeIn(300);
              var $c = cloneImg($());
              $c.appendTo($body);
              centerImg($c);
          });
      });

    var timer = null;
    $(window).on("resize",1)">(){
      $("img[clone-bigImg]").each((){
        var $this = $();
        timer && clearTimeout(timer);
        timer = setTimeout((){
          centerImg($);
        },10);
      });
    });


    $(window).on("click keydown",1)">(evt){
      if(evt.type == "keydown" && evt.keyCode === 27) {
        $layer.fadeOut(300);
        $("img[clone-bigImg]").remove();
      }
      this = $(evt.target);
      if($this.attr("clone-bigImg")){
        $layer.fadeOut(300).remove();
      }
    });

  }
})(jQuery,document);
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65683.html