基于动态背景颜色的颜色反转使用javascript库

Color inverse based on dynamic background color using javascript library

本文关键字：颜色 javascript 动态 背景 于动态      更新时间：2023-09-26

请看这个JSFIDDLE

div背景随机生成，有时a元素与背景颜色相同，使a不可见。所以，我如何动态地逆a背景颜色，以确保a将永远不可见?

HTML

登录
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
....
....
CSS 

div {
    display: block;
    width: 100%;
    height: 200px;
}
a {
    display: inline-block;
    top: 10%;
    left: 50%;
    position: fixed;
    padding: 20px;
    border: 1px solid grey;
}
Javascript 

$('div').each(function() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    $(this).css('background', color);
});

您需要将锚点放在第一个div中。然后无论何时滚动，您都必须将它从一个div移动到下一个div。在滚动时，您将检查父div的背景颜色，并反转锚的颜色。

$(document).scroll(function(){
//do stuff here
});

像这样

相关文章：