根据后面的图像更改标题颜色答案

【问题标题】：change caption color depending on image behind it根据后面的图像更改标题颜色
【发布时间】：2021-04-16 15:09:31
【问题描述】：

我正在开发一个投资组合网站，该网站是一个完整的浏览器大小容器，当从左到右移动光标时，图像会被交换。我通过一个名为 swinger.js 的 jquery 脚本实现了这一点。我在为此添加字幕时遇到了一些麻烦，但昨晚在此处的一些帮助下，我使用 alt 属性让它工作。现在的问题是我想要一些白色的标题和黑色的其他标题（取决于它背后的图像），我希望网站标题也能发生同样的情况。我在 img src 标签内添加了一个类，它指定哪个应该是哪个。 class="swinger_img_white" 用于白色标题，class="swinger_img_black" 当它需要为黑色时但我无法让它工作。

我的编码经验只有一两周，我能走到这一步是靠运气、帮助和尝试其他网站的代码的奉献精神。任何帮助将不胜感激！

*注意：带标题我只是指一些与图像（解释它）一起以任何可能的方式出现的文本。不必像网页设计中使用的标题那样构建，只需工作即可。

这是我现在的简化版本：

$.fn.swinger = function () {
    return this.each(function () {
        var $container = $(this);
        $container.css({
            "position": "relative"
        });
        var $images = $container.find("img");
        $images.css({
            
        });
        var $middleImage = $($images[Math.floor($images.length / 2)]);
        $middleImage.css({
            "z-index": "2",
            "position": "relative"
        });
        var columnsCount = $images.length;
        $images.each((i, img) => {
            var left = `${100 / columnsCount * i}%`;
            var width = `${100 / columnsCount}%`;
            var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
            $(img).after($column);
            $column.hover(() => {
                $images.css({
                    "z-index": "1",
                    "position": "absolute"
                });
                $(img).css({
                    "z-index": "2",
                    "position": "relative"
                });
                // this was added last night for the captions
                $(".caption").text($(img).attr("alt"));

        
            });
        })
    });
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {

}

.left-holder {
    text-align: left;
    float: left;
    margin-right: 55px;
    width: 250px; }

div.swinger-container {
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; 
    width: 100vw;
height: calc(100vh);

}

div.swinger-container img {
    object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
  }

  header {
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: -2px;
    text-align: center;
    z-index: 100;
    -webkit-transition: all .2s;
    transition: all .2s; }
    header.header-about {
      color: white !important;
      background-color: white; }
    header h1, header h2, header .about {
      font-size: 1em;
      font-weight: 400;
      display: block;
      line-height: 1.2em;
      margin-bottom: 0;
      padding-bottom: 0; }
    header h1 {
      text-align: left; }
    header a {
      text-decoration: none;
      color: white;
      line-height: 1; }
    header .about {
      text-align: left;
      padding-bottom: 2px; }

      .left-holder{
          color:white
      }

        .caption {
            text-align: right;
            float: right;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <title>website title</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        <div class="left-holder">
            <h1>my name</h1> 
            <h2>what I do</h2>
        </div>
        <div class="caption">

        </div>
       
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" class=“swinger_img_white” alt="Caption 1"/>
            <img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
            <img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 3"/>
            <img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
            <img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" class=“swinger_img_white” alt="Caption 5"/>
            <img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
            <img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_black” alt="Caption 7"/>
            <img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" class=“swinger_img_black” alt="Caption 8"/>
            
        </div> 
    </div>

    <script type="text/javascript">
        $(document).ready(init);
        function init() 
        {
            $(".swinger-container").swinger();
        }
</script>

   <script src="swinger.js"></script>
    
  
</body>
</html>

【问题讨论】：

您必须使用正确的引号 " 或 ' - 而不是 “” (6699) - jsfiddle.net/k8y0Lsrz
感谢您的提醒！我没有注意到这个错误。

标签： javascript html jquery css caption

【解决方案1】：

如果您在数据属性中保留一些有关条件的信息，我会很好，例如：

<img src="https://..." data-color="white" alt="Caption 1"/>
<img src="https://..." data-color="black" alt="Caption 2"/>

然后您可以使用 .css 方法更改标题的颜色，您将从 data-color 属性中传递值，如下所示：

$(".caption")
    .text($(img).attr("alt"))
    .css('color', $(img).data('color'));

【讨论】：

太棒了，这似乎很好用，谢谢！有没有办法包含标题文本的颜色？ “我的名字”“我的工作”
你可以使用.css('color', $(img).data('color'))作为标题标签，而不是像$('header').css('color', $(img).data('color'))这样的标题
效果很好！你认为有办法让 jquery 立即加载吗？当我现在打开网站时，我必须移动光标以显示标题和说明。当我加载网站时，它是否已经存在？非常感谢
通常在实际项目中，所有静态文件都缓存在客户端（浏览器缓存），这使它们可以更快地加载，而且您的图像必须从与您的 html 文件相同的文件夹中加载比我从互联网加载要快得多
啊，当我测试它时我不知道它似乎我必须将光标悬停以使swinger.js发生，以便出现标题和标题，也许代码隐藏了它开始？