如何解决根据背后的图像更改标题颜色
我正在开发一个投资组合网站，它是一个完整的浏览器大小的容器，当从左到右移动光标时，图像会交换。我用一个名为 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>解决方法
如果您在数据属性中保留一些有关条件的信息，我会很好，例如：
<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'));
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
