Make Love

2014-07-14

周末写的一个小插件，可以通过简单的JS调用用DOM生成指定大小、指定颜色的心形。效果如下：

调用示例

html

<div class="wrap" id="wrap"></div>

js

var heart = new Heart();
heart.init();

此时，绘制出来的效果为demo图里中间的那个心形。

当然，还可以通过传入配置来改变心形的大小和颜色。

var opt = {
        parentId: "big",//容器id
        triangleH: 10,  //底部三角形的高，通过它来控制心形的大小
        color: [        //颜色值，随机取，数组长度为1时为单一颜色
            "#FF443E"
        ]
};

效果如下：

在此基础上，结合一些动画特效，还可以有更酷一点的效果(用鼠标移入、移出或点击)：

js代码：

function animate(){
    $('#wrap>div>div').each(function(id){
        $(this).css({
            position: 'relative',
            top: '-200px',
            opacity: 0
        });
        var wait = Math.floor((Math.random()*2000)+1);
        $(this).delay(wait).animate({
            top: '0px',
            opacity: 1
        },1000);
    });
}
$(function(){
    var opt = {
        parentId: "wrap",
        triangleH: 10,
        color: [
            "#E9ACCA"
        ]
    };
    var heart = new Heart(opt);
    heart.init();

    animate();
    $("#wrap>div>div").click(animate).mouseover(function(){
        $(this).css({"background-color":"#5A7E99"});
    }).mouseout(function(){
        $(this).css({"background-color":"#E9ACCA"});
    });
});

View on github