标题栏中的JavaScript动态文本(带购物功能)
标题栏中的JavaScript动态文本(带购物功能)
提问于 2018-08-21 02:16:32
我已经创建了一个动态文本标题带，这要归功于我找到的代码并根据我的需要进行了调整。
<marquee behavior="scroll" direction="left" scrollamount="3" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#232F3E">
<strong>NOUVEAU : 1 article acheté = <u><a target="_blank" class="header" href=/pages/arbres title="1 article acheté = 1arbre – Trésor Ethnique">1 ARBRE PLANTÉ</a></u></strong> avec l’association <i>One Tree Planted</i>
·
Première Commande: 10% de Réduction avec le Coupon BIENVENUE
·
Livraison Suivie OFFERTE
·
Plus de 5.000 Clientes Satisfaites
</marquee>它工作得很好，但我在寻找是否可以把这个做得更好。
实际上，我希望文本在4个不同的行上。
每隔3秒，它会切换(不滚动)到下一行文本(垂直移动)
然后，总序列将持续12秒
以下是网站：https://www.tresor-ethnique.com/
PS:我正在使用CMS Shopify，我已经安装了一个主题。因此，我对HTML没有任何控制。
我只能在一个字段上集成HTML内容。
如何做到这一点？
PS:我使用了一个主题，所以我可以在字段中直接输入HTML
如果需要，我知道如何在HTML中集成Javascript代码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-26 06:55:04
这是我想出的第二个解决方案，使用CSS动画
无论如何，我无法得到我真正想要的结果，因为在显示所有文本之前，条形图正在刷新
无论如何，我希望这个解决方案能帮助任何后来读到这篇文章的人：
祝你今天愉快!
<span class="defileParent">
<span class="defile">
<strong>NOUVEAU : 1 article acheté = <u><a target="_blank" class="header" href=/pages/arbres title="1 article acheté = 1arbre – Trésor Ethnique">1 ARBRE PLANTÉ</a></u></strong> avec l’association <i>One Tree Planted</i>
·
Première Commande: 10% de Réduction avec le Coupon BIENVENUE
·
Livraison Suivie OFFERTE
·
Plus de 5.000 Clientes Satisfaites
</span>
</span>
<style type="text/css">
.defileParent {
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 860px;
}
.defile {
display:block;
-webkit-animation:linear marqueelike 15s infinite ;
-moz-animation:linear marqueelike 15s infinite ;
-o-animation:linear marqueelike 15s infinite ;
-ms-animation:linear marqueelike 15s infinite ;
animation:linear marqueelike 15s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
.defile:after {
content:attr(data-text);
position:absolute;
white-space:nowrap;
padding-left:10px;
}
@-webkit-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-moz-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-o-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-ms-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@media only screen and (max-width: 860px) {
.defileParent {
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 100%;
}
.defile {
display:block;
-webkit-animation:linear marqueelike 15s infinite ;
-moz-animation:linear marqueelike 15s infinite ;
-o-animation:linear marqueelike 15s infinite ;
-ms-animation:linear marqueelike 15s infinite ;
animation:linear marqueelike 15s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
}
</style>
@media only screen and (max-width: 860px) {
.defileParent {
display: block;
margin: 3em auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 100%;
}
.defile {
display:block;
-webkit-animation:linear marqueelike 15s infinite ;
-moz-animation:linear marqueelike 15s infinite ;
-o-animation:linear marqueelike 15s infinite ;
-ms-animation:linear marqueelike 15s infinite ;
animation:linear marqueelike 15s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51936448
复制相关文章
相似问题