复制代码 代码如下:

复制代码 代码如下:

(function ($) {
    $.extend({
        timer: function (action,context,time) {
            var _timer;
            if ($.isFunction(action)) {
                (function () {
                    _timer = setInterval(function () {
                        if (!action(context)) {
                            clearInterval(_timer);
                        }
                    }, time);
                })();
            }
        }
    });
})(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>
<html xmlns=”;
<head>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
    <title>画布</title>
    <script src=”../script/jquery.min.js”></script>
    <script src=”../script/jTimer.js”></script>
    <style type=”text/css”>
        #wrap
        {
            display: table;
            margin: 0 auto;
        }

调用方法:

        #cvs
        {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    <script type=”text/javascript”>
        function drawRound(context) {           
            if (context.counterclockwise) {
                draw(context.x, context.y, context.r, context.start,
context.start – Math.PI / 50, context.counterclockwise);
                context.start -= Math.PI / 50;
                return context.start > 0.5 * Math.PI;
            }
            else {
                draw(context.x, context.y, context.r, context.start,
context.start + Math.PI / 50, context.counterclockwise);
                context.start += Math.PI / 50;
                return context.start < Math.PI;
            }
        }
        function draw(x, y, r, sAngle, eAngle, counterclockwise) {
            var cvs = document.getElementById(“cvs”);
            ctx = cvs.getContext(“2d”);
            ctx.strokeStyle = “#f00”;
            ctx.beginPath();
            ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
            ctx.stroke();
        }
        $(function () {
            $.timer(drawRound, { x: 100, y: 100, r: 50, start: 1.5 *
Math.PI, counterclockwise: true }, 200);
            $.timer(drawRound, { x: 100, y: 100, r: 60, start: 0,
counterclockwise: false }, 200);
        });
    </script>
</head>
<body>
    <div id=”wrap”>
        <canvas id=”cvs” height=”400″
width=”500″></canvas>
    </div>
</body>
</html>

复制代码 代码如下:

您也许感兴趣的稿子:

  • jQuery基础的厂子函数以及计时器的经文实例分析
  • 依照jQuery完成的扇形放大计时器附源码下载
  • 利用jQuery计时器的规律完成banner图片切换
  • 粗略的代码完结jquery放大计时器
  • 大概的代码达成jquery电火花计时器
  • Javascript/Jquery——轻易沙漏的各种贯彻形式
  • jQuery扇形计时器插件pietimer使用方法详解

<!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>