win8风格百度联盟云标签无规则布局

相关代码$(function() { var titles = ['JavaScript', 'CSS', 'HTML', 'HTML5', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL', 'jqueryfuns']; var words = []; for(var i = 0; i < titles.length; i++) { words[i] = { 'title' : titles[i], 'url' : '' } } var colors1 = ['#F46779', '#045DA4']; var colors2 = ['#D59A3E', '#C58B59']; var colors3 = ['#49B4E0', '#FCBDA2', '#EBADBD', '#D5C2AF', '#C0BDE5', '#CBCC7F', '#FFDA7F', '#8dd0c3', '#bbbfc6', '#a4d9ef', '#bbdb98']; // responsive // 响应式wordbox需要有外层嵌套div var wb1 = new WordBox('#box-responsive', { isLead: false, //是否包含“全部”分类 leadWord: null, words: words, colors: colors1, borderWidth: 2, isFixedWidth: false }); // fixed width $('#box-fixedWidth1').wordbox({ isLead: false, leadWord: null, words: words, colors: colors2, borderWidth: 2, isFixedWidth: true, width: 800, height: 200 }); $('#box-fixedWidth2').wordbox({ isLead: true, leadWord: {'title': '全部', 'url': ''}, words: words, colors: colors3, borderWidth: 2, isFixedWidth: true, width: 280, height: 300 }); // 鼠标浮动加下划线 $('.box a').hover(function(event) { $(this).css({'text-decoration': 'underline'}); event.stopPropagation(); }, function(event) { $(this).css({'text-decoration': 'none'}); event.stopPropagation(); }); // 鼠标浮动字体变大 var fontSize = $('#box-responsive').css('font-size'); $('#box-fixedWidth1 .box a').hover(function(event) { $(this).css({'font-size': '1.4em'}); event.stopPropagation(); }, function(event) { $(this).css({'font-size': fontSize}); event.stopPropagation(); });});

在线演示        积分下载        6毛下载        砍两刀下载