十六进制颜色随机 [英] Random hex colour

问题描述

我正在使用以下代码在页面上的某些元素上生成随机的十六进制颜色.

I am using the following code to generate a random hex colour on certain elements on my page.

CSS

/**** Random hex values ****/

.isotope-brick.color0 .brick-overlay {
background-color: #E1A2AC;
}

.isotope-brick.color0 .brick-info {
color: #E1A2AC;
}

.isotope-brick.color1 .brick-overlay {
    background-color: #FDC300;
}

.isotope-brick.color1 .brick-info {
    color: #FDC300;
}

.isotope-brick.color2 .brick-overlay {
    background-color: #56AF31;
}

.isotope-brick.color2 .brick-info {
    color: #56AF31;
}

.isotope-brick.color3 .brick-overlay {
    background-color: #39B6AB;
}

.isotope-brick.color3 .brick-info {
    color: #39B6AB;
}

JS

// Random hex colour
$(document).ready(function () {
    colorsCount = 4;
    var colorArray = $('.isotope-brick, .rsGCaption');
    $.each(colorArray, function (ind, obj) {
        $(obj).addClass('color' + Math.floor(Math.random() * colorsCount));
    });
});

HTML

<figure class="<?php echo get_post_type( $post ) ?> <?php echo $termsString; ?> isotope-brick">

        <a href="<?php the_permalink(); ?>">
        <figcaption class="brick-overlay colour-array">
                <h2><?php the_title(); ?></h2>
                <h5><?php the_excerpt(); ?></h5>
                <h4><?php $category = get_the_category(); echo $category[0]->cat_name;?></h4>
        </figcaption><!-- end brick-overlay -->

        <figcaption class="brick-info">
                <h2><?php the_title(); ?></h2>
                <h4 class="colour-array"><?php $category = get_the_category(); echo $category[0]->cat_name;?></h4>
        </figcaption><!-- end brick-info -->

            <?php if ( has_post_thumbnail() ) { 
                      the_post_thumbnail();
                } ?>
        </a>
    </figure><!-- end figure -->

这一切都很好，但是我想将其扩展到站点的另一个区域.我在Royalslider插件中以相同的方式设置了一个标题框，我想将此随机颜色扩展到顶部边距和颜色选择器.该网站是citizenfilms.co.uk/beta.我们将不胜感激！

This all works great, but I want to extend it to another area of the site. I have a caption box styled in the same way inside the Royalslider plugin, and I would like to extend this random colour to the top margin and colour selectors. The site is citizenfilms.co.uk/beta. Any help here would be most appreciated!

推荐答案

感谢Casey Rule的建议:将我的自定义JS代码放置在插件JS的下面.这是关键.

Thanks to Casey Rule for the advice re: positioning my custom JS code BELOW that of the plugin JS. That is the key here.

完成此操作后，只需将以下内容替换为原始CSS即可.

Once this is done it's simply a case of replacing the original css with the following.

凯西加油！

/**** Random hex values ****/

.isotope-brick.color0 .brick-overlay {
    background-color: #E1A2AC;
}

.isotope-brick.color0 .brick-info {
    color: #E1A2AC;
}

.rsGCaption.color0 {
    border-color: #E1A2AC;
    color: #E1A2AC;
}

.isotope-brick.color1 .brick-overlay {
    background-color: #FDC300;
}

.isotope-brick.color1 .brick-info {
    color: #FDC300;
}

.rsGCaption.color1 {
    border-color: #FDC300;
    color: #FDC300;
}

.isotope-brick.color2 .brick-overlay {
    background-color: #56AF31;
}

.isotope-brick.color2 .brick-info {
    color: #56AF31;
}

.rsGCaption.color2 {
    border-color: #56AF31;
    color: #56AF31;
}

.isotope-brick.color3 .brick-overlay {
    background-color: #39B6AB;
}

.isotope-brick.color3 .brick-info {
    color: #39B6AB;
}

.rsGCaption.color3 {
    border-color: #39B6AB;
    color: #39B6AB;
}

这篇关于十六进制颜色随机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！