在跨度之間自動切換
[英]Automatically toggle between spans
問題描述
我找不到任何允許在sentence here加上sentence here end word sentence here答案
我的想法是，我將在一個跨度中有一個項目列表，然后在它們之間切換，因此句子的開頭是相同的，只有結尾是變化的。 理想情況下，將有某種動畫形式，但即使功能也將受到贊賞。
<p class="itemlist">We sell <span class="items"> <span>Bread</span> <span>Milk</span> <span>Fish</span> <span>Eggs</span> <span>Cheese</span> </span> </p>
理想情況下，我希望它一次顯示一個項目。 最終結果看起來像下面的GIF，但文本應保留在同一位置。
任何提示/答案將不勝感激。 我為此花了兩個小時。
提前致謝。
7 個解決方案
解決方案1
3 已采納 2019-05-22 21:43:53
這是使用setInterval的示例
let i=0; const items = Array.from(document.querySelectorAll('.items span')); const showNewItem = (index) => { items.forEach(i => i.style.display = 'none'); items[index].style.display = 'inline'; } // Initial call showNewItem(i++); setInterval(() => { showNewItem(i++); if(i > items.length-1) i = 0; },1000);
<p class="itemlist">We sell <span class="items"> <span>Bread</span> <span>Milk</span> <span>Fish</span> <span>Eggs</span> <span>Cheese</span> </span> </p>
解決方案2
1 2019-05-22 21:57:27
您可以添加延遲。 這是一個示例代碼
<!DOCTYPE html> <html> <body> <p class="itemlist">We sell <span class="items"> <span id="demo"> Bread</span> </span> </p> <script> var delayInMilliseconds1 = 1000; var delayInMilliseconds2 = 2000; var delayInMilliseconds3 = 3000; setTimeout(function() { document.getElementById("demo").innerHTML = "Milk"; }, delayInMilliseconds1); setTimeout(function() { document.getElementById("demo").innerHTML = "Fish"; }, delayInMilliseconds2); setTimeout(function() { document.getElementById("demo").innerHTML = "Eggs"; }, delayInMilliseconds3); </script> </body> </html>
解決方案3
0 2019-05-22 21:49:06
是，setInterval是關鍵[編輯]文本現在居中
const All_span = document.querySelectorAll('p.itemlist span.items span'); var NoSpan = 0; setInterval(() => { All_span[NoSpan++].style.display = 'none'; NoSpan %= All_span.length; All_span[NoSpan].style.display = 'inline'; }, 900);
p.itemlist { font: 2em Verdana, Geneva, Arial, Helvetica, sans-serif; display: block; width: 8em; text-align: center; } p.itemlist span.items span { display: none; color:crimson; } p.itemlist span.items span:first-child { display: inline; }
<p class="itemlist">We sell <span class="items"> <span>Bread</span> <span>Milk</span> <span>Fish</span> <span>Eggs</span> <span>Cheese</span> </span> </p>
解決方案4
0 2019-05-22 21:53:20
var itemArray = ['Bread', 'Milk', 'Fish', 'Eggs', 'Cheese']; var animationInterval; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function setItemName(_name) { var itemList = document.getElementsByClassName('items')[0]; itemList.textContent = _name; } function startAnimation() { animationInterval = setInterval(function(){ var randomNumber = getRandomInt(itemArray.length); setItemName(itemArray[randomNumber]); }, 1000) } function endAnimation() { clearInterval(animationInterval); } setItemName(itemArray[0]);
<p class="itemlist">We sell <span class="items"></span> </p> <button onclick="startAnimation();"> Start </button> <button onclick="endAnimation();"> End </button>
解決方案5
0 2019-05-22 21:57:28
設置一個項目以開始使用“ first”之類的類
使用jQuery，獲取項目列表，並設置間隔。 然后淡出當前的活動，然后淡入下一個。
僅通過抓住下一個同級元素，或者如果到達末尾，就抓住條目列表的第一個子元素，找到下一個元素。
let itemsList = $(".items").first(); const changeItem = () => { let current = itemsList.find("span.active"); current.removeClass("active"); current.fadeOut(200, () => { let next; if (current.next().length > 0) next = current.next(); else next = itemsList.children().first(); next.addClass("active"); next.fadeIn(200); }); } setInterval(changeItem, 2000);
.items span { color: red; display: none; } span.first { display: inline-block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="itemlist">We sell <span class="items"> <span class="active first">Bread</span> <span>Milk</span> <span>Fish</span> <span>Eggs</span> <span>Cheese</span> </span> </p>
解決方案6
0 2019-05-22 22:10:59
如何將數據與HTML分離？ 然后使用setInterval
const itemList = ['Bread', 'Milk', 'Fish'] const prefix = "We Sell" const placeholder = document.getElementById('placeholder'); let index = 0; setInterval(() => { index = index >= itemList.length ? 0 : index; placeholder.innerHTML = `${prefix} <span style='color: red'> ${itemList[index]} </span>`; index++; }, 1000)
<div id="placeholder" />
解決方案7
0 2019-05-22 23:10:53
span { display: inline-block; vertical-align: top; } .items span { position: absolute;/* instead display */ animation: var(--delay, 0) 10s hidsh linear infinite; } @keyframes hidsh { 0%, 80% { color: transparent; } 80.1%, 100% { color: initial }
<p class="itemlist">We sell <span class="items"> <span style='--delay:-2s' >Bread </span> <span style='--delay:-4s'>Milk </span> <span style='--delay:-6s'>Fish </span> <span style='--delay:-8s'>Eggs </span> <span style='--delay:-10s'>Cheese</span> </span> </p>
.items span {--delay:-2s } .items span:nth-child(2) {--delay:-4s } .items span:nth-child(3) {--delay:-6s } .items span:nth-child(4) {--delay:-8s } .items span:nth-child(5) {--delay:-10s} span { display: inline-block; vertical-align: top; } .items span { position: absolute;/* instead display*/ animation: var(--delay, 0) 10s hidsh linear infinite; } @keyframes hidsh { 0%, 80% { color: transparent;/* instead visibility or opacity */ } 80.1%, 100% { color: initial }
<p class="itemlist">We sell <span class="items"> <span>Bread </span> <span>Milk </span> <span>Fish </span> <span>Eggs </span> <span>Cheese</span> </span> </p>
Vb.net 代碼使用計時器自動在 2 個網格視圖之間切換頁面
[英]Vb.net code to toggle the page between 2 gridviews automatically using timer
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.