原创jQuery插件之loading

最新推荐文章于 2022-06-28 11:42:45 发布

717606641

最新推荐文章于 2022-06-28 11:42:45 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： jquery插件 js loading

本文链接：https://blog.csdn.net/u010655942/article/details/52225838

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一个常用的小玩意儿，先上图

有图才有真相嘛

插件充分利用了:before和:after伪元素，这样，不会对原dom结构造成影响。

但是同样也会带来一定的弊端，就是如果此元素有用到:before和:after伪元素，就要慎用此插件了。

调用

插件调用很简单，图片里面都已经写得很清楚了。

描述一下各参数的意义以及可选值吧

speed：速度，可以是字符串slow、normal、fast，也可以是数值，表示动画进行的时间长度，单位是ms。默认值：normal

bgcolor：任何有意义的颜色字符串，默认值：green

height：进度条的高度，单位：px，默认值：1

mask：是否遮盖目标，如果遮盖目标，目标内的按钮等可交互元素不可交互（从图中可以看到，勾选mask然后loading，“停止动画”按钮不再可以点击），该遮盖层使用:after元素，默认值：false

zindex:20160819新加这个参数，设定动画的z序，防止被别的元素遮挡

哦，别忘了：可以使用$('selector').loading('stop')停止动画效果

源代码

<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery.loading</title>
</head>
<body>
    <style type="text/css">
        html, body { height: 100%; padding: 0; margin: 0; }
        .form { width: 550px; margin: 100px auto; padding: 15px; box-shadow: #ccc 1px 1px 10px; }
        .form > div { margin-top: 15px; }
    </style>
    <div class="form">
        <div>
            <label for="speed">speed</label>
            <select id="speed">
                <option>slow</option>
                <option>normal</option>
                <option>fast</option>
            </select>
        </div>
        <div>
            <label for="bgcolor">bgcolor</label>
            <input type="color" id="bgcolor" />
        </div>
        <div>
            <label for="height">height</label>
            <input type="number" id="height" />
        </div>
        <div>
            <label for="mask">mask</label>
            <input type="checkbox" value=true id="mask" />
        </div>
        <div>
            <button id="bstart">开始动画</button>
            <button id="bstop">停止动画</button>
        </div>
        <div>
            <code>
                $('.form').loading()
            </code>
        </div>
    </div>
    <script src="Scripts/jquery-2.2.3.js"></script>
    <script>
        $.fn.extend({
            loading: function (opts) {
                if (opts === 'stop') {
                    this.each(function () {
                        var $el = $(this)
                        var uniqueStr = $el.data('cloadinguniquestr')
                        if (!uniqueStr)
                            return
                        $el.removeClass(uniqueStr).removeData('cloadinguniquestr')
                        if (!$el.attr('class'))
                            $el.removeAttr('class')
                        $('#' + uniqueStr).remove()
                    })
                    return
                }
                var _opts = {
                    speed: 'normal',
                    bgcolor: 'green',
                    height: 1,
                    mask: false,
                    zindex: 1
                }
                opts = $.extend(_opts, opts)
                this.each(function () {
                    var $el = $(this)
                    var uniqueStr = $el.data('cloadinguniquestr')
                    if (uniqueStr)
                        return
                    var elOffset = $el.offset()
                    var uniqueStr = 'cloading' + elOffset.top.toString().replace('.', '') + elOffset.left.toString().replace('.', '') + $.now()
                    $el.data('cloadinguniquestr', uniqueStr)
                    var elClass = uniqueStr
                    $el.addClass(elClass)
                    var elAnimationName = uniqueStr
                    var loadingCssPosition = $el[0].tagName === 'BODY' ? 'fixed' : 'absolute'
                    var elWidth = $el.width()
                    var duration = 4000
                    if (opts.speed === 'slow')
                        duration = elWidth * 12
                    else if (opts.speed === 'normal')
                        duration = elWidth * 8
                    else if (opts.speed === 'fast')
                        duration = elWidth * 4
                    else {
                        if ($.isNumeric(opts.speed))
                            duration = opts.speed
                        else
                            throw 'speed的值只能是slow,normal,fast或者数值'
                    }
                    var styleId = uniqueStr
                    var style = ''
                    style += '<style id="' + styleId + '">'
                    var oldCssPosiztion = $el.css('position')
                    if (oldCssPosiztion === 'static') {
                        style += '.' + elClass + '{ position: relative; }'
                    }
                    style += '.' + elClass + ':before { background-color: ' + opts.bgcolor + '; width: 0; height: ' + opts.height + 'px; display: block; content: ""; z-index: ' + opts.zindex + '; top: 0; animation: ' + elAnimationName + ' ' + duration + 'ms linear infinite; position: ' + loadingCssPosition + '; }'
                    style += '@keyframes ' + elAnimationName + ' {'
                    style += '0% { width: 0; left: 0; }'
                    style += '50% { width: 100%; left: 0; }'
                    style += '100% { width: 0; left: 100%; }'
                    style += '}'
                    if (opts.mask) {
                        style += '.' + elClass + ':after { z-index: ' + (opts.zindex + 1) + '; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; content: ""; position: ' + loadingCssPosition + '; }'
                    }
                    style + '</style>'
                    $('body').append(style)
                })
            }
        })
    </script>
    <script>
        $('input, select').on('change', function () {
            var opts = {
                speed: speed.value,
                bgcolor: bgcolor.value,
                height: height.value || 1,
                mask: mask.checked
            }
            $('code').text('$(\'.form\').loading(' + JSON.stringify(opts) + ')')
        })
        $('#bstart').click(function () {
            var opts = {
                speed: speed.value,
                bgcolor: bgcolor.value,
                height: height.value || 1,
                mask: mask.checked
            }
            $('.form').loading(opts)
        })
        $('#bstop').click(function () {
            $('.form').loading('stop')
        })
    </script>
</body>
</html>

兼容性

引用的jQuery版本是2.2.3，其他版本没有测过。

浏览器测试了IE11、edge、Firefox、chrome、Opera，都可以正常运行。其他浏览器可以自行测试。

更新日志

20160904　在添加了zindex后，发现在此属性chrome不生效，但是在firefox没问题。

我本以为chrome不支持在动态添加的style使用zindex属性，我把这个属性删除，结果top属性又失效了。

现在我怀疑chrome有这样的bug，position属性要放在最后，不然，他后面的属性不能生效。

不知道是chrome有这个bug还是我不会用，有清楚这个的还请不吝赐教，先谢谢了。

所以，现在我把position属性放到最后，这样，zindex属性也能生效了。

717606641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原创jQuery插件之loading

插件充分利用了:before和:after伪元素，这样，不会对原doom结构造成影响。$('selector').loading()开始动画$('selector').loading('stop')停止动画
复制链接

扫一扫