jquery创建一个图片、视频缓冲的效果样式插件

利用css和jquery创建一个动画效果的缓冲样式插件，插件可以开始、暂停、结束.

 

(function($) {
    $.fn.scrollWait = function(options) {
        var ops = $.extend({}, $.fn.scrollWait.defaults, options);
        var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops;
        /**
         * 显示位置
         */
        var win = $(window);
        var winheight = win.height();
        var winwidth = win.width();
        var dsize = opts.size;
        var top = opts.top;
        var left = opts.left;
        var dtop = !top && top != "" && typeof top != "undefined" && top != 0
                ? (winheight - dsize) / 2
                : top;
        var dleft = !left && left != "" && typeof left != "undefined"
                && left != 0 ? (winwidth - dsize) / 2 : left;
        // 原点数量
        var num = opts.num;
        // 原点直径
        var R = dsize / num * opts.areaWeight;
        // 半径
        var r = 1 / 2 * R;
        // 外侧圆直径
        var outerR = 1 / 2 * dsize;
        // 内侧圆直径
        var innerR = outerR - R;
        // 遍历添加原点对象
        for (var i = 0; i < num; i++) {
            $('body').append($("<div class=\"innerCircle\" id=\"innerCircle"
                    + i + "\"></div>"));
        }
        // 其实坐标0,0
        var i = 0;
        var innerArray = new Array(num);
        /**
         * 计算内圆上个点的中心坐标
         */
        for (var j = 0; j < innerArray.length; j++) {
            var x, y;
            var ang = i * 360 / num;
            if (0 <= ang && ang <= 90) {
                x = outerR * Math.sin(ang / 180 * Math.PI) + outerR;
                y = outerR - outerR * Math.cos(ang / 180 * Math.PI);
            }
            if (90 < ang && ang <= 180) {
                x = outerR * Math.cos((ang - 90) / 180 * Math.PI) + outerR;
                y = outerR * Math.sin((ang - 90) / 180 * Math.PI) + outerR;
            }
            if (180 < ang && ang <= 270) {
                x = outerR - outerR * Math.sin((ang - 180) / 180 * Math.PI);
                y = outerR * Math.cos((ang - 180) / 180 * Math.PI) + outerR;
            }
            if (270 < ang && ang <= 360) {
                x = outerR - outerR * Math.cos((ang - 270) / 180 * Math.PI);
                y = outerR - outerR * Math.sin((ang - 270) / 180 * Math.PI);
            }
            innerArray[j] = new Array(dtop + y - r, dleft + x - r);
            i++;
        }
        /**
         * 画圆
         */
        $(".innerCircle").each(function() {
            $(this).css({
                'width' : R + "px",
                'height' : R + "px",
                'border-top-left-radius' : r + "px",
                'border-top-right-radius' : r + "px",
                'border-bottom-left-radius' : r + "px",
                'border-bottom-right-radius' : r + "px"
            });
        });
        for (var i = 0; i < num; i++) {
            $("#innerCircle" + i).css({
                'top' : innerArray[i][0] + "px",
                'left' : innerArray[i][1] + "px"
            });
        }
        // 查找当前暂停的圆的位置
        var val = $("#current").val();
        if (val == undefined || val == "") {
            $("body").append($("<input type=\"hidden\" id=\"current\">"));
            k = 0;
        } else {
            k = val;
        }
        var o = new Object();
        var timer;
        // 开始旋转
        o.start = function() {
            var first;
            var g = $("#grade").val();
            if (g == undefined || g == "") {
                $("body").append($("<input type=\"hidden\" id=\"grade\">"));
                first = 1;
            } else {
                first = g;
            }
            timer = setInterval(function() {
                if (first % 2 == 1) {
                    $("#innerCircle" + k).removeClass("innerCircle")
                            .addClass("innerCircle-change");
                }
                if (first % 2 == 0) {
                    $("#innerCircle" + k).removeClass("innerCircle-change")
                            .addClass("innerCircle");
                }
                if (k == (num - 1)) {
                    k = 0;
                    console.log(first);
                    first++;
                    $("#grade").val(first);
                } else {
                    k++;
                }
                // 覆盖值
                $("#current").val(k);
            }, opts.speed);
            return this;
        }
        // 暂停
        o.stop = function() {
            clearInterval(timer);
            return this;
        }
        // 结束
        o.end = function() {
            clearInterval(timer);
            // 移除所有元素
            $(".innerCircle,.innerCircle-change,#current,#grade").remove();
        }
        return o;
    }
    $.fn.scrollWait.defaults = {
        size : 80,
        top : null,
        left : null,
        // 数量
        num : 8,
        speed : 200,
        // 圆点占整个面积的比重
        areaWeight : 5 / 4
    };

})(jQuery);

 

调用方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>MyHtml.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css"
            href="scroll-wait-jquery-plugin.css">

    </head>
    <script type="text/javascript" src="jquery-1.7.js"></script>
    <script type="text/javascript" src="scroll-wait-jquery-plugin.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        var w=$("body").scrollWait();
        w.start();
        
        setTimeout(function() {w.stop();},1000);
            setTimeout(function() {w.start();},2000);
            setTimeout(function() {w.stop();},3000);
            setTimeout(function() {w.start();},4000);
            setTimeout(function() {w.stop();},5000);
            setTimeout(function() {w.start();},6000);
            setTimeout(function() {w.end();},7000);
        });
    </script>
    <body>


    </body>
</html>

css:

 

.innerCircle {
	position: absolute;
	background: #FFFF00;
	opacity: 0.8;
}

.innerCircle-change {
	background: #333;
	position: absolute;
}

　　

demo：

（怎么提供在线的demo观看？）

 

 

 

转载于:https://www.cnblogs.com/tatame/archive/2012/08/28/2660410.html