简单的jq插件例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606456545038&di=f1f20487325aa2b367ef22c16451060e&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F25%2F99%2F19300000421423134190997943822.jpg"
    alt="" data-rotate="120deg" class="abc">
  <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" alt=""
    class="abc">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    ; (function ($) {
      Transform = function (element, options) {
        var that = this
        that.options = $.extend({}, that.DEFAULTS, $(element).data(), options)
        $(element).on('click', function () {
          that.rotate($(element), that.options)
        })
      }

      Transform.prototype.DEFAULTS = {
        rotate: '10deg'
      }

      Transform.prototype.rotate = function ($element, options) {
        $element.css({
          transform: 'rotate(' + options.rotate + ')'
        })
      }

      $.fn.transform = function (option) {
        this.each(function () {
          new Transform(this, option)
        })
      }
      // 注：
      // 给jq对象原型添加transform方法（这样每个jq对象都有transform方法），并实例化构造函数Transform,
      // 并把每个用transform（）的dom对象与参数传给构造函数Transform
      // 这样就给每个dom对象都绑定了click方法，然后就能执行里面的方法
    })(jQuery)

  </script>
  <script>
    $(function () {
      $('.abc').transform()
      // $('.abc').transform({ rotate: '50deg' })
    })
  </script>
</body>

</html>
简单的jq插件例子

猜你喜欢
