实现一个简单的对联插件

实现一个简单的对联插件

jquery插件的固定格式，一共有三种，方便自己用插件的时候，更好的理解

 // 格式一
        ;(function () {
            var _that; // 声明变量 用于后面保留this
            
            function _插件名 () {
                // 保留this
                _that = this;

                // 插件功能代码
                
                // 返回this 便于链式调用
                return _that;
            }

             // 挂在jquery的原型上
            $.fn.插件名 = _插件名
        })()

  // 格式二
        ;(function () {
            var _that; // 声明变量 用于后面保留this
            
            $.fn.插件名 = function () {
                // 保留this
                _that = this;

                // 插件功能代码
                
                // 返回this 便于链式调用
                return _that;
            }
             
        })()

   // 格式三
        ;(function () {
            var _that; // 声明变量 用于后面保留this
            
            $.fn.extend({
                插件名: function () {
                    // 保留this
                    _that = this;

                    // 插件功能代码
                    
                    // 返回this 便于链式调用
                    return _that;
                }
            })
             
        })()

下面是一个对联插件

/*
  对联插件
  参数说明:
    leftImg: 左边图片url
    rightImg: 右边图片url
    width: 宽度
    height: 高度
    leftTop: 左侧上边距离
    leftLeft: 左侧左边距
    rightTop: 右侧上边距
    rightRight: 右侧右边距
 */
;(function ($) {
    // 定义变量 用于保留this
    var _that;

    // 实现插件功能 且 挂在jQuery的原型上
    $.fn.extend({
        ad: function (opts) {
            // 保留this
            _that = this;

            // 默认参数
            var defaultOpts = {
                // leftImg: './images/ad.png',
                // rightImg: './images/adbar.jpg',
                width: '150px',
                height: '300px',
                leftTop: '100px',
                leftLeft: '10px',
                rightRight: '10px',
                rightTop: '100px'
            }

            // 默认参数 和 自己传的参数 合并
            var parms = $.extend({}, defaultOpts, opts);


            // 左侧图片
            // 左侧图片DOM
            var $leftImg = $(`<img src="${parms.leftImg}"/>`);
            // 左侧图片位置
            $leftImg.css({
                position: 'fixed',
                left: parms.leftLeft,
                top: parms.leftTop,
                width: parms.width,
                height: parms.height
            })
            // 添加到页面
            $leftImg.appendTo(_that);
            
            // 右侧图片
            // 右侧图片DOM
            var $rightImg = $(`<img width="100%" height="100%" src="${parms.rightImg}"/>`);
            // 右侧图片位置
            $rightImg.css({
                position: 'fixed',
                right: parms.rightRight,
                top: parms.rightTop,
                width: parms.width,
                height: parms.height
            })
            // 添加到页面
            $rightImg.appendTo(_that);

            // 返回this
            return _that;
        }
    })

})(jQuery)