• 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/

  • 相关阅读:
    多线程
    事务的概念与四大特性(ACID)
    Error和Exception的区别
    运算符的使用与注意事项(二)
    运算符的使用与注意事项(一)
    GOJS使用--前端拓扑图
    python算法实现分治法demo
    MySQL主从复制配置
    MySQL锁
    show profile查看SQL执行生命周期
  • 原文地址:https://www.cnblogs.com/moqiutao/p/6671820.html
Copyright © 2020-2023  润新知