環形效果

環形效果是否是至關的誘人,首先看幾個例子:
一、colorful-clock  --- 漂亮
二、CSS3+js實現多彩炫酷旋轉圓環時鐘效果  --- very good
三、Percentage Loader  --- 帥

colorful-clock效果圖以下:



有沒有更刺激的,接下來見證奇蹟的時刻,以下圖(精緻):



在此以前,在回顧下前兩個例子:
一、時鐘效果_raphael.js
二、幸運大抽獎



javascript

實現原理:
第一步:構造圓環css

r.customAttributes.arc = function(value, total, R) {
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = 150 + R * Math.cos(a),
        y = 150 - R * Math.sin(a),
        path;
    if (total == value) {
        path = [
            ["M", 150, 150 - R],
            ["A", R, R, 0, 1, 1, 149.99, 150 - R]
        ];
    } else {
        path = [
            ["M", 150, 150 - R],
            ["A", R, R, 0, +(alpha > 180), 1, x, y]
        ];
    }
    bpath = path;
    return {
        path: path
    };
};
r.path().attr({
    arc: [100, 100, rad],
    'stroke-width': 20,
    'stroke': "#cecece"
});


第二步:環形動起來和事件綁定html

function updateVal(value, total, R, hand, id) { 
    if (init) {
        hand.animate({
            arc: [value, total, R]
        }, 900, ">");
    } else {
        if (!value || value == total) {
            value = total;
            hand.animate({
                arc: [value, total, R]
            }, 750, "bounce", function() {
                hand.attr({
                    arc: [0, total, R]
                });
            });
        } else {
            hand.animate({
                arc: [value, total, R]
            }, 750, "elastic");
        }
    }
};
z.mouseover(function() {
    this.animate({
        'stroke-width': 36,
        opacity: 0.75
    }, 600, 'elastic');
}).mouseout(function() {
    this.stop().animate({
        'stroke-width': 26,
        opacity: 1
    }, speed * 4, 'elastic');
});


第三步:倒計時java

function dinit() {
    if (tmptime > 0) {
        ds = parseInt(tmptime % 60);
        dm = parseInt(tmptime / 60) % 60;
        dh = parseInt(tmptime / 3600) % 24;

        txt.remove();
        txt = r.text(150, 150, dh + ":" + dm + ":" + ds).attr({
            font: "100 36px Arial",
            fill: opts.color
        });
    }
};

function playing() {
    dstop = setInterval(function() {
        tmptime--;
        if (tmptime <= 1) { !! opts.endSucc && opts.endSucc();
            clearInterval(dstop);
        } else {
            dinit();
        }
    }, 1000);
};


搞定,大功告成。感興趣的能夠動手試試,寫更fashion的效果,期待你的見證。



參考:
polar-clock
CSS3+JS動態圓形圖例jquery代碼jquery



DEMO:web

wordpress

ui

相關文章
相關標籤/搜索