如果使用Jquery创建Win8风格的色块超链接

来源：互联网发布：前十月中国经济数据编辑：程序博客网时间：2024/06/05 06:30

我们在一些网页中经常会看见类似WIN8系统风格的那种色块形式，其实实现起来很简单。本文将讲解一种可以随机生成色块背景色的WIN8色块源码。供js新手们一起讨论学习。

首先，要有一个html文档。然后在<head>标签中引入Jquery：

<script src="http://code.jquery.com/jquery-latest.js"></script>

然后在<head>或者<body>标签中写入样式：

<style>    .page-con{width:1000px;height: 135px;background: none;border: none;}    .page-con .list{height:100%;padding: 0;width: 970px;}    .page-con .more{height: 100%;padding-top: 26px;background: #fa6800;cursor: pointer;}    .page-con .more a{color: #fff;}    .page-con .list li{padding: 5px 0 5px 10px;border: none;height: 45.3%;background: #ccc;margin: 0 2px 2px 0;line-height: 1.2em;overflow: hidden;color: #fff;cursor: pointer;float: left;}    .page-con .list li span{width: 100%;color: #fff;float: left;}    .page-con .list li span:hover{text-decoration: underline;}    .page-con .list li b{font-size:9px;font-family: "microsoft yahei";padding-left: 5px;}    .page-con .list li .name{width: 100%;}    .page-con .list li .name a{font-family:"microsoft yahei";color: #fff;}    #elem0{width:24%;height: 99%;}    #elem1{width: 12.6%;}    #elem2{width:22.3%;}    #elem3{width: 12.6%;}    #elem4{width:22.3%;}    #elem5{width: 12.6%;}    #elem6{width:22.3%;}    #elem7{width:22.3%;}    #elem8{width: 12.6%;}    #elem1 a,#elem3 a,#elem5 a,#elem8 a{font-size: 14px;}    #elem2 a,#elem4 a,#elem6 a,#elem7 a{font-size: 18px;}    #elem0 a{font-size: 22px;}    #elem0 span{line-height: 2em;}    #elem0 .name{text-indent: 8pt;}    #elem0 .time{text-indent: 8pt;}    #elem0 .firm{text-align: right;width: 95%;margin-top: 4px;}</style>

然后在body中写入页面标签：

<div class="page-con">    <ul class="list">        <li id="elem0"><span>本站推荐：</span><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem1"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem2"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem3"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem4"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem5"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem6"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem7"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>        <li id="elem8"><span class="name blue"><a>主标题</a><b>副标题</b></span><span class="time">属性1</span><span class="firm">属性2</span></li>    </ul></div>

最后在body中写入JS代码（关键）：

<script type="text/javascript">    $(function(){        var interval=setInterval(function(){            var count=$('.list li').length;            if(count>8){                kflist.initkf();                clearInterval(interval);            }        },1);    });    var kflist={        initkf:function(){            this.randcolors();        },        randcolors:function(){            for(var i=0;i<9;i++){                var id='.list li';                var color=this.dorand();                $(id).eq(i).css('background',color);                $(id).eq(i).fadeIn(1);            }        },        dorand:function(){            var result='';            var c=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];            /*            * 下面的c_option是配置组成十六进制颜色值的6个数字的条件，            * 其中每一组[a,b]格式的元素对应一个十六进制数字，左面的            * a表示将上面定义的c平均分成几组，右面的b表示在分组结果            * 中使用哪一组进行计算。比如第2条配置[2,1]表示，将上面            * 定义的c数组平均分为两组。使用第一组['0','1','2','3',            * '4','5','6','7','8']。然后从选出的这一组中随机选择一            * 个数字，作为#xxxxxx这类颜色值中的第2个值。其他类同。a            * 配置越大，分组数越多，从而色彩变化范围越小。b配置越大，            * 分组选定越靠后，色彩越亮。反之亦然。            * */            var c_option=[[1,1],[2,1],[2,1],[1,1],[2,1],[1,1]];            /*使用函数随机生成一个颜色*/            result=this.mixfactory(c,c_option);            /*返回结果*/            return result;        },        /*        * 随机生成颜色十六进制值的函数。        * array:包含16进制个位数字符的数组        * opt:每个色彩位置的色彩选择预设        * */        mixfactory:function(array,opt){            var array_len=array.length;            var opt_len=opt.length;            var result=[];            for(var i=0;i<opt_len;i++){                /*取出分组数和选取的组ID*/                var group_num=opt[i][0];                var group_selected_id=opt[i][1];                /*求出平均每个区分配的元素数量*/                var divide_group_num=Math.floor(array_len/group_num);                /*按照最大分组数生成被选择数组*/                var selected_group=[];                //先求出一个下限值，如果下限值＜0，则令其=0                var pre_limit=(group_selected_id-1)*divide_group_num;                if(pre_limit<0) pre_limit=0;                //再求出一个上限值，如果上限值＞颜色数组的最大长度，则令其等于最大长度                var last_limit=pre_limit+divide_group_num;                if(last_limit>array_len)last_limit=array_len;                /*截取出需要用到的数组片段*/                var selected_c=array.slice(pre_limit,last_limit);                /*随机选取片段中的一个元素值并输出到数组*/                var c=selected_c[this.getrandom(divide_group_num-1)];                result.push(c);            }            /*整理并返回*/            return '#'+result.join('');        },        getrandom:function(num){            return Math.floor(Math.random()*num+1);        }    }</script>

说明：在JS代码中，使用JSON结构加载了事件的处理过程。

1.$(function)中的setInterval()函数：在这里考虑到，有些时候页面中的<li>标签是动态添加的。避免在9个<li>标签没有完全加载完的情况下，就执行了分配色块的函数，使得部分色块显示默认底色（白色）。Setinterval()会不停的检测<li>的数量，直到确实有9个了，才会停止计时，并执行下面的色彩配置函数。

2.色彩配置函数中（本例中的dorand函数），使用了随机的方式来获取每个<li>区域的色彩。从而保证了色块的美感搭配。在这里，我使用到的随机方法是，将一个表示十六进制颜色值的“#LMNOPQ”结构拆分成一个['L','M','N','O','P','Q']数组，然后用某种规则（本例中的mixfactory函数），给该数组的每一个元素随机取值，然后再把数组转换为十六进制颜色值。

3.关于色彩配置规则的函数mixfactory()：这个函数有两个参数，第一个参数是个常量数组（长度为16，每个元素是一个不同的十六进制数）；第二个参数是个配置表（数组）。mixfactory的工作原理是使用第二个参数提供的配置方式，对第一个数组进行处理，从而得到结果。具体处理方式请看上面JS中的注释。

4.关于配置表c_option：大家都知道十六进制颜色值中，前两个数代表原色R（红光）、中间两个数代表原色G（绿光）、末尾两个数代表原色B（蓝光）。而这些数从0变化到F，越靠近0，该原色光线越暗，饱和度越低；越靠近F，该原色光线越强，饱和度越高。如：#000000是黑色（没有光线），#FF0000是红色（蓝光和绿光为0，红光最亮）。所以在配置c_option的时候，一般都可以将其分成三组考虑，每组有两个数组元素，对应一个原色。比如本例中，c_option的前两个元素“[1,1],[2,1]”代表红光R的配置。如果配置中的两个数字我们用[a,b]表示，那么a越大，红色可选择范围就越小，色彩就越单调；b越大，红色越偏亮色饱和区域，色彩就越明显。反之亦然。G和B光线同理。

谢谢大家~！如果有什么问题请回帖。

附效果图一张：

0 0