最近项目中做了一个jquery.validate气泡提示。
好像最新版的jquery.validate中,有这个功能,但在我这里不怎么好用。
就自己加了一个。
找了一些插件qtip2的样式不错,但我本地显示不出来呀。他本身也有jquery.validate的例子。但样式在我这里不显示呀。好像是jquery版本的问他,用他的jquery就可以显示。用我的就不行坑爹。放弃。
poshytip-1.1这个,样式还不错! positionX,positionY是提示显示的位置。
复制代码 代码如下: $.ready { // validate
the comment form when it is submitted var myForm = $; myForm.validate({
onkeyup: false, success: function { var elem = $; elem.poshytip;
elem.poshytip; }, errorPlacement: function { var elem = $; if {
//右:x=right;y=center //左:x=left;y=center //上:x=inner-left
//下:x=center;y=bottom var aX = “center”; if (elem.attr { aX =
elem.attr; } var aY = “bottom”; if (elem.attr { aY = elem.attr; }
elem.filter.poshytip({ content: error, alignTo: ‘target’, alignX: aX,
alignY: aY, offsetX: 0, offsetY: 5 }); } else { elem.poshytip;
elem.poshytip; }); 存在问题 onkeyup不可以为
ture,因为这样,有些验证,气泡会一直存在。这个不科学。大家有什么好的办法没?

环形效果是不是相当的诱人,首先看几个例子:
1、colorful-clock
 — 漂亮
2、CSS3+js实现多彩炫酷旋转圆环时钟效果
 — very good
3、Percentage
Loader  — 帅

colorful-clock效果图如下:
图片 1

有没有更刺激的,接下来见证奇迹的时刻,如下图(精致):
图片 2

在此之前,在回顾下前两个例子:
1、时钟效果_raphael.js
2、幸运大抽奖

实现原理:
第一步:构造圆环

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"
});

第二步:环形动起来和事件绑定

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');
});

第三步:倒计时

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代码

DEMO:

<!doctype html> <html lang=”cn”> <head> <meta
charset=”UTF-8″> <title>环形</title> <style>
*{margin:0px;padding: 0px;} body{padding: 0px 0px 300px;} .main{width:
960px; margin: 0px auto;overflow: hidden;} .mainTit{color: #f00;
font-size: 50px;font-weight:bold;text-align: center; text-shadow: 3px
1px 6px #f60; padding: 10px 0px;} .mainBlock{overflow: hidden;} .main
.block{float: left; width: 300px; height: 300px; margin: 0px 10px;
overflow: hidden;} .main .block div{width: 100%; height: 100%; } .main
.remark{color: #333;font-size: 12px; text-align: center; margin-top:
10px;} </style> </head> <body> <div
class=”main”> <div class=”mainTit”>环形</div> <div
class=”mainBlock”> <div class=”block”><div
id=”test1″></div></div> <div class=”block”><div
id=”test2″></div></div> <div class=”block”><div
id=”test3″></div></div> <div class=”block”><div
id=”test4″></div></div> <div class=”block”><div
id=”test5″></div></div> <div class=”block”><div
id=”test6″></div></div> </div> </div>
<script
src=”;
<script
src=”;
<script type=”text/javascript”> (function($) { $.drawCircle =
function(options) { var defaults = { elem: null, size: 0, start: null,
end: null, endSucc: null }; var opts = $.extend({}, defaults, options);
if (!opts.elem) { return; } var r = Raphael(opts.elem, 300, 300), rad =
80, init = true, speed = 200, z = null, txt = null; var tmptime =
opts.end – opts.start, ds = null, dm = null, dh = null, dstop = null; if
(opts.size === 0) { opts.color = “#cecece”; } else { opts.color =
getColor(opts.size) || “#000000”; } function minit() {
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” }); r.path().attr({ arc: [100, 100, 110], ‘stroke-width’:
2, ‘stroke’: “#cecece” }); if(!!opts.size){ z = r.path().attr({ arc:
[0.01, 100, rad], ‘stroke-width’: 20, ‘stroke’: opts.color, ‘cursor’:
“pointer” }); updateVal(opts.size, 100, 80, z, 2); } var circle =
r.circle(150, 150, 70); circle.attr(“fill”, “#fff”);
circle.attr(“stroke”, “none”); circle.glow({ width: 8, opacity: 0.3,
offsety: 4 }); txt = r.text(150, 150, opts.size + “%”).attr({ font: “100
36px Arial”, fill: opts.color }); }; 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 });
// txt.toFront(); } }; function playing() { dstop =
setInterval(function() { tmptime–; if (tmptime <= 1) { !!
opts.endSucc && opts.endSucc(); clearInterval(dstop); } else { dinit();
} }, 1000); }; function getColor(size) { var arr = []; for (var i = 0;
i <= 255; i++) { arr.push(“rgb(” + i + “,” + (255 – i) + “,”+0+”)”);
} return arr[parseInt(size * 2.55)]; }; 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”); } } };
function mevents() { if(!!opts.size){ z.mouseover(function() {
this.animate({ ‘stroke-width’: 36, opacity: 0.75 }, 600, ‘elastic’);
//txt.toFront(); }).mouseout(function() { this.stop().animate({
‘stroke-width’: 26, opacity: 1 }, speed * 4, ‘elastic’); }); } };
minit(); dinit(); playing(); mevents(); }; })(jQuery); $(function() {
$.drawCircle({ elem: “test1”, size: 0, start: 0, end: 6600 });
$.drawCircle({ elem: “test2”, size: 0 }); $.drawCircle({ elem: “test3”,
size: 25 }); $.drawCircle({ elem: “test4”, size: 55 }); $.drawCircle({
elem: “test5”, size: 85 }); $.drawCircle({ elem: “test6”, size: 100 });
}); </script> </body> </html>

运行代码

相关文章