我有一个从借来的代码(从
here
/
here
,我通过外部PHP动态生成的包含HTML提供格式化文本。这正是我需要的效果。
问题是,它工作得很好…但是
只有
如果我用一吨
<FONT COLOR>
获取所需格式的标记(
每个字有几种颜色
)我反复读到,我不必使用
<FONT>
因为它被弃用了,所以会让婴儿哭泣或其他什么。
工作MCVE:
$("#caption").css("width", $("#caption > span:first-child").width());
$("#caption").css("height", $("#caption > span:first-child").height());
var captionIdx = 0;
var captionItemCount = $("#caption > span").length;
setInterval(function() {
$("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
captionIdx = (captionIdx + 1) % captionItemCount;
var $next = $("#caption span:eq(" + captionIdx + ")");
$("#caption").css("width", $next.width());
$("#caption").css("height", $next.height());
$next.fadeIn("slow");
}, 2000);
#container {
text-align: center;
display: block;
}
#caption {
padding: 0px;
display: inline-block;
position: relative;
vertical-align: bottom;
-webkit-transition: width 0.25s linear;
-moz-transition: width 0.25s linear;
-ms-transition: width 0.25s linear;
-o-transition: width 0.25s linear;
transition: width 0.25s linear;
}
#caption>span {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
#caption>span:first-child {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container">
This task is
<span id="caption">
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
<span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
<span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
</span>
</div>
</body>
…所以我尝试改用CSS,
但它“破坏”了旋转木马
大概是因为我需要额外的
<SPAN>
s应用格式,而jquery使用
<SPAN & GT;
作为短语旋转中的分隔符。
破碎的MCVE:
注释
唯一的区别是3行
<style>
三条线在
<span id="caption">
.
$(“caption”).css(“width”,$(“caption>span:first child”).width());
$(“caption”).css(“height”,$(“caption>span:first child”).height());
var captionidx=0;
var captionitemcount=$(“caption>span”).length;
setInterval(函数()。{
$(“caption-span:eq(”+captionidx+“)”).fadeout(“slow”);
CaptionIdx=(CaptionIdx+1)%CaptionItemCount;
var$next=$(“caption-span:eq(+captionidx+”);
$(“caption”).css(“width”,$next.width());
$(“caption”).css(“height”,$next.height());
$next.fadein(“慢”);
},2000);
.w1 { color: #FF0000; }
.w2 { color: #00FF00; }
.w3 { color: #0000FF; }
#container {
text-align: center;
display: block;
}
#caption {
padding: 0px;
display: inline-block;
position: relative;
vertical-align: bottom;
-webkit-transition: width 0.25s linear;
-moz-transition: width 0.25s linear;
-ms-transition: width 0.25s linear;
-o-transition: width 0.25s linear;
transition: width 0.25s linear;
}
#caption>span {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
#caption>span:first-child {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container">
This task is
<span id="caption">
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
</span>
</div>
</body>
我一直在尝试各种组合
div
s &
span
s
和
Display
类属性
inline-block
但是因为我不清楚jquery是什么
做
我不能让它在一条线上工作。
有快速解决办法吗?
红利问题:
使用诸如
<字体& gt;
或
<B>
是吗?我无法想象,任何浏览器都会允许他们“停止工作”,很快更新;使数百万的旧页面无法正常工作(而他们的竞争对手仍然支持不推荐使用的标签)…?
