标签云css+js效果

代码语言:html

所属分类:其他

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            /*多彩tag*/
            var tags_a = $("#tags").find("a");
            tags_a.each(function() {
                var x = 9;
                var y = 0;
                var rand = parseInt(Math.random() * (x - y + 1) + y);
                $(this).addClass("size"+rand);
            });

        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img {
            border: 0;
        }
        body {
            font: 12px/180% Arial, Helvetica, sans-serif ,"宋体";
        }

        .demo {
            background: #FFF8DE;
            border: solid 1px #ff6600;
            width: 380px;
            margin: 20px auto;
        }
        .demo h2 {
            font-size: 18px;
            height: 32px;
            padding: 10px 0 0 20px;
            font-family: "微软雅黑","宋体";
            border-bottom: solid 1px #ff6600;
        }
        .taglist {
            padding: 20px 20px 30px 20px;
        }
        .taglist a {
            padding: 3px;
            display: inline-block;
            white-space: nowrap;
        }
        a.size1 {
            font-size: 25px;
            padding: 10px;
            color: #804D40;
        }
        a.size1:hover {
            color: #E13728;
        }
        a.size2 {
            padding: 7px;
            font-size: 20px;
            color: #B9251A;
        }
        a.size2:hover {
            color: #E13728;
        }
        a.size3 {
            padding: 5px;
            font-size: 35px;
            color: #C4876A;
        }
        a.size3:hover {
            color: #E13728;
        }
        a.size4 {
            padding: 5px;
            font-size: 15px;
            color: #B46A47;
        }
        a.size4:hover {
            color: #E13728;
        }
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0