js标签云效果 jquery.svg3dtagcloud.min.js


image



下载链接: https://pan.baidu.com/s/1F7YjBcF4ipEdMaKMS_CiZg 提取码: qapt


--------------实例参考------------------

$.getJSON('json/tag_cloud.json',function (res) {
    //json 转数组
    var entries = [];
    for (let i in res) {
        let o = {};
        let colors = ['#ff4761','#45bb36','#ffb422','#00eaff','#ffffff'];
        o.label = i;
        o.url = '#'+(res[i]);
        o.target = '_top';
        o.fontSize = randomNum(14,28);
        o.fontColor = colors[randomNum(0,5)];
        entries.push(o);
    }
    var cloudW = $('.main .reci .con').width();
    var cloudH = $('.main .reci .con').height();
    setTimeout(function(){
        var cloud_set = tag_init(cloudW,cloudH,entries);
        $( '#tag-cloud' ).svg3DTagCloud( cloud_set );
    },1000);

});
//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
}
function tag_init(cloudW,cloudH,entries){

    console.log(entries);

    var cloud_set = {

        entries: entries,
        width: cloudW,
        height: cloudH,
        radius: '120%',
        radiusMin: 100,
        bgDraw: true,
        bgColor: 'none',
        opacityOver: 1.00,
        opacityOut: 0.05,
        opacitySpeed: 6,
        fov: 800,
        speed: 0.6,
        fontFamily: 'Oswald, Arial, sans-serif',
        fontSize: '18',
        fontColor: '#0097a5',
        fontWeight: 'normal',//bold
        fontStyle: 'normal',//italic 
        fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
        fontToUpperCase: true

    };

    return cloud_set;

}