简单的图片放大插件

其他 2021-02-08 19:52:47 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .zoomin {
      cursor: pointer;
      cursor: zoom-in;
      cursor: -webkit-zoom-in;
    }

    .zoomin-shadow {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      display: block;
      z-index: 9999;
      background: rgba(0, 0, 0, 0.3);
    }

    .zoomin-shadow .zoomin-pop-img {
      position: absolute;
      top: 10vh;
      left: 50%;
      margin-bottom: 100px;
      transform: translateX(-50%);
      opacity: 1 !important;
      height: auto !important;
      cursor: zoom-out;
      cursor: -webkit-zoom-out;
    }
  </style>
  <style>
    .abc {
      width: 200px;
      display: block;
    }
  </style>
</head>

<body>
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606985694390&di=0e1f4279d390fa3dfa43fc9138b2aefc&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F22%2F59%2F19300001325156131228593878903.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607000257598&di=31c8512ccb422ee793b1b0548822a36a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F01%2F06%2F01300000329394123030066246677.jpg"
    alt="" class="abc">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    ; (function ($, window) {

      Zoomin = function (element, options) {
        var that = this
        this.windowScrollTop = 0
        this._zoomed = false
        this.$shadow = null
        this.$popImg = null
        that.options = $.extend({}, Zoomin.DEFAULTS, options)
        $(element).addClass('zoomin')
        $(element).on('click', function (e) {
          that.zoomInFn(e, that.options)
        })
      }

      Zoomin.DEFAULTS = {
        width: '57vw',
        duration: 400,
        easing: 'linear'
      }

      Zoomin.prototype.zoomInFn = function (e, options) {
        var that = this
        if (that._zoomed) return
        that.$shadow && (that.$shadow = null)
        this.$shadow = $('<div class="zoomin-shadow"></div>')
        $('body').append(this.$shadow)
        this.$shadow.append(e.target.outerHTML)
        $('.zoomin-shadow').children().addClass('zoomin-pop-img')
        this.$popImg = $('.zoomin-pop-img')
        this.$popImg.width(options.width)
        this.addTransition(this.$popImg, options)
        this.windowScrollTop = $(window).scrollTop()
        $('body').attr('style', 'position: fixed; top: -' + this.windowScrollTop + 'px;')
        setTimeout(function () {
          that.$shadow.on('click', function () {
            that.zoomOut()
          })
        }, options.duration)
      }

      Zoomin.prototype.zoomOut = function () {
        var that = this
        $('body').attr('style', '')
        $('html').scrollTop(that.windowScrollTop)
        that.$shadow.fadeOut(300, function () {
          $('.zoomin-shadow').remove()
          that._zoomed = false
        })
      }

      Zoomin.prototype.addTransition = function ($element, options) {
        this.transition($element, 'all ' + options.duration + 'ms ' + options.easing)
      }
      Zoomin.prototype.transition = function ($element, value) {
        $element.css({
          '-webkit-transition': value,
          '-moz-transition': value,
          '-ms-transition': value,
          '-o-transition': value,
          transition: value
        })
      }

      Zoomin.prototype.transform = function ($element, value) {
        $element.css({
          '-webkit-transform': value,
          '-moz-transform': value,
          '-ms-transform': value,
          '-o-transform': value,
          transform: value
        })
      }

      $.fn.zoomin = function (option) {
        var that = this
        that.each(function () {
          if (!$(this).hasClass('zoomin')) {
            new Zoomin(this, option)
          }
        })
      }
    })(jQuery, window)


  </script>
  <script>
    $(function () {
      $('.abc').zoomin()
    })
  </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_41111677/article/details/110558848
今日推荐
周排行
简述ArrayList、Vector、LinkedList三者的特点
什么是 Shell？
湖南省株洲市谷歌高清卫星地图下载
99乘法表（for循环嵌套）
pat-1027
简单算法面试题（附自己的答案）
全国乡镇边界 / 乡镇界线 / 乡镇行政面数据 分享
【JAVA】学习记录【递归查询子节点】
CSS里的BFC和IFC的用法
04.CSS3 transition属性及案例分享
每日归档
更多
2025-02-10(0)
2025-02-09(0)
2025-02-08(0)
2025-02-07(0)
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022