用3种随机盒阴影颜色

Question

案例顺序框：

我使用猫头鹰传送带以最大10个缩略图的框（将跨越与浏览器手动滚动限定宽度各面板）。不过，我在Google上搜索过“如何使用jQuery创建3个随机颜色”，并且似乎有些结果对我来说很难整合。

代码图1

BoxShadow = function() { 
    var hfiColors = ['#00A9E0', '#E82425', '#EFB12A']; 
    var colors = hfiColors.slice(0); 

    $('.program-gallery .item').each(function(i){ 
    var i = i + 1; 
    var color = Math.floor(Math.random() * colors.length); 

    $(this).css('box-shadow', '0 0 0 5px' + colors[color]); 
    colors = colors.slice(0,color-1).concat(colors.slice(color+1,colors.length-1)); 
    }); 

    $.each(colors, function(i, v){ 
    $('.item' + (+i + 1)).html(colors[i]); 
    }); 
} 
$(document).ready(BoxShadow); 

这是代码我有，到目前为止，它随机产生的box-shadow我的缩略图，但有些箱阴影，我的缩略图无法正确显示。诚实地说，我现在对代码结构感到困惑。

码图2

<div class="program-gallery"> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=201" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit consequuntur. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=202" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Suscipit blanditiis quos aspernatur minus optio beatae consectetur quidem accusantium rerum ab sed nisi. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=203" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Culpa consequuntur necessitatibus laboriosam, quas quos odit non unde consequatur fugit rerum incidunt. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
</div> 

要取得哪些成果：

我想创建的3个随机的box-shadow颜色（只）以上各（10个大拇指） .item班。

照片图1

Answer 1

您可以通过9创建一个包含从A通过F和字母数字0一个变量字符串，用String.prototype.concat()和Array.from()从字符串变量串连随机字符设置元素的box-shadow 。

$(function() { 
 
    var base = ['#00A9E0', '#E82425', '#EFB12A']; 
 
    var shadow = "0 0 0 5px "; 
 

 
    function randomColor() { 
 
    return shadow + base[Math.floor(Math.random() * base.length)] 
 
    } 
 
    
 
    $(".item").each(function() { 
 
    $(this).css("boxShadow", randomColor()) 
 
    }) 
 
})

.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    margin: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div> 
 
<div class="item">6</div> 
 
<div class="item">7</div> 
 
<div class="item">8</div> 
 
<div class="item">9</div> 
 
<div class="item">10</div>

Answer 2

BoxShadow = function() { 
 
    var hfiColors = ['#00A9E0', '#E82425', '#EFB12A']; 
 
    var colors = hfiColors.slice(0); 
 

 
    $('.program-gallery .item img').each(function(){ 
 
    var colorIndex = Math.floor(Math.random() * colors.length);  
 
    $(this).css('box-shadow', '0 0 0 5px' + colors.splice(colorIndex, 1)); 
 
    }); 
 
} 
 
$(document).ready(BoxShadow);

.item { width: 30%; display: inline-block; vertical-align:top; } 
 
img { max-width: 100% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="program-gallery"> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=201" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit consequuntur. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=202" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Suscipit blanditiis quos aspernatur minus optio beatae consectetur quidem accusantium rerum ab sed nisi. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=203" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Culpa consequuntur necessitatibus laboriosam, quas quos odit non unde consequatur fugit rerum incidunt. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
</div>

更新您的代码升技。并为视觉效果添加了一些CSS。

$('.program-gallery .item img').each(function(){ 
// I targeted each image instead of `.item` 

而不必切片和Concat的你的阵列从中删除项目，只需使用splice的：

$(this).css('box-shadow', '0 0 0 5px' + colors.splice(colorIndex, 1));