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


    首先先搭写一个基本的格式:

    $.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,
            '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',
                  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({
                      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);

    参考地址:http://barretlee.com/blog/2015/09/19/jquery-plugin-for-alert-img/

  • 相关阅读:
    python常用包官网及包的安装方法
    二进制安装mysql-5.7.26
    ufw防火墙规则不生效
    Zabbix 3.0 配置企业微信报警(配置zabbix-web)
    Zabbix 3.0 配置企业微信报警(注册---测试)
    阿里云盾AliYunDun服务IO超高
    zabbix详解
    ntp时间同步
    zabbix解决中文乱码
    ssh登录服务器提示错误no hostkey alg
  • 原文地址:https://www.cnblogs.com/moqiutao/p/6671820.html
Copyright © 2020-2023  润新知