【广州前端】-【JQuery插件】- 加载过渡动画插件 - 黑马程序员技术交流社区

[JavaScript] 纯文本查看 复制代码



 <!-- 引入必要的JS文件 -->

        <script type="text/javascript" src="jquery.min.js"></script>

        <script type="text/javascript" src="spin.min.js"></script>

[JavaScript] 纯文本查看 复制代码



 $(function () {

                // 1、选择容器

                var target = document.getElementById('foo');

                // 2、实例化使用

                var spinner = new Spinner().spin(target);

            })

[JavaScript] 纯文本查看 复制代码



 $(function () {

                // 1、选择容器

                var target = document.getElementById('foo');

                // 2、实例化使用

                var opts = {

                    lines: 9, // 线条个数

                    length: 10, // 线条的长度

                    width: 10, // 线条的粗细

                    radius: 15, // 内圆的半径

                    corners: 1, // 线条圆角 （取值范围：0 ~ 1）

                    rotate: 0, // 偏移角度

                    color: '#000', // 颜色

                    speed: 1, // 转圈速度

                    trail: 100, // 消失速率

                    shadow: false, // 是否渲染阴影

                    hwaccel: true, // 是否硬件加速

                    className: 'spinner', // 类名

                    zIndex: 2e9, // z-index值 (默认：2000000000)

                    top: 'auto', // 相对父的top定位

                    left: 'auto' // 相对父的left定位

                };

                var target = document.getElementById('foo');

                var spinner = new Spinner(opts).spin(target);

            })