素材网 素材网

jQuery win8界面布局标签插件

下载资源()次

阅读次数()次

发布时间:2015-06-14

jQuery win8界面布局标签插件
分享到:

用法简介:

来源:xw素材网

jQuery win8界面布局标签插件。
文件引用:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/wordbox.js"></script>
<script type="text/javascript">
$(function() {
    var titles = ['JavaScript', 'CSS', 'HTML', 'HTML5', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL', '站长素材'];
    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();
    });
});
 </script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。