简单的图片放大插件

其他 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
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022