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

最新推荐文章于 2021-06-13 13:39:16 发布

叮当葫芦猫

最新推荐文章于 2021-06-13 13:39:16 发布

阅读量914

点赞数 1

分类专栏： JQuery JS HTML 色彩学习 CSS 文章标签： jquery WIN8色块随机颜色色块广告彩色条

本文链接：https://blog.csdn.net/kingwensport/article/details/39315763

版权

JQuery 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

我们在一些网页中经常会看见类似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光线同理。

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

附效果图一张：