使用JavaScript和CSS動畫來創建一個文本框選

我捕食有人可以幫助我..使用JavaScript和CSS動畫來創建一個文本框選

簡史：

林建設互聯網上的廣播電臺，網頁將顯示元對於歌曲播放和過去播放的歌曲...

到目前爲止，我已經設法構建了一個MYSQL數據庫，在PHP中查詢數據庫，使用JSON編碼數據數組，使用ajax設置一個計時器來查詢數據庫和JavaScript來解析數據到HTML ...

我還設法讓我的頭圍繞HTML CSS &在一定程度上..

我是全新的編碼，一切都很好磨磨蹭蹭和我在JavaScript中做了一些課程，但我想是太推進了到目前爲止，我所採取的任何課程....

問題：

我希望做一個文本字幕將顯示歌曲的當前播放的名稱。文字框會有一些規則。

規則1：如果歌曲的名稱等於或小於顯示區域，歌曲名稱將在屏幕上保持靜態。

規則2：如果歌曲的名稱大於顯示區域，那麼它需要動畫。

在你走之前的任何進一步的我需要注意的是我已經看了幾JQuery的帳篷，但他們都不適合我的需求

的數學：

固定DIV WIDTH = 257.4像素

（這是「包裝」，它將包含變量文本（這是比我的最大文本寬度稍大，所以它看起來很漂亮......））

可變文本WIDTH = x個字

（用「list0title」，這是從MySQL數據庫可變數據）中所定義（字符將需要被轉換爲像素爲使用最大文本WIDTH）

最大文本WIDTH = 250個像素

（這是符合該「包裝」舒適，如果可變文本寬度等於或小於最大文本WIDTH文本將是靜態的最大文本，否則TEX T將在一個乒乓式動畫）

動畫：

可變文本WIDTH - 最大文本WIDTH = PIXELS動畫（例如，如果我的可變文本寬度爲150個像素和我的最大文本寬度爲100個像素，我會需要通過50個像素150-100 = 50個像素）

所以這上面我解釋的JavaScript/CSS intergrated腳本，我需要在我行的最佳方式進行動畫處理的文本..

我將在下面包含我的JavaScript，以便您可以看到如何從MYSQL數據庫中獲取信息，並提供動畫的示例代碼。

JAVASCRIPT：

function getPlaylist() 
{ 
var xmlhttp, 
timer; 

if (window.XMLHttpRequest) 
    { 
    xmlhttp = new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

xmlhttp.onreadystatechange = function() 
    { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    { 

    var list = eval ('('+xmlhttp.responseText+')'); 
    { 

document.getElementById("list0artist").innerHTML=list[0].artist; 
document.getElementById("list0title").innerHTML=list[0].title; 
document.getElementById("list0titlelength").innerHTML=list[0].title.clientwidth; 
document.getElementById("list0label").innerHTML=list[0].label; 
document.getElementById("list0albumyear").innerHTML=list[0].albumyear; 
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="169" height="169"/>'; 

document.getElementById("list1artist").innerHTML=list[1].artist; 
document.getElementById("list1title").innerHTML=list[1].title; 
document.getElementById("list1label").innerHTML=list[1].label; 
document.getElementById("list1albumyear").innerHTML=list[1].albumyear; 
document.getElementById("list1picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="83px" height="83px"/>'; 

document.getElementById("list2artist").innerHTML=list[2].artist; 
document.getElementById("list2title").innerHTML=list[2].title; 
document.getElementById("list2label").innerHTML=list[2].label; 
document.getElementById("list2albumyear").innerHTML=list[2].albumyear; 
document.getElementById("list2picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="83px" height="83px"/>'; 

document.getElementById("list3artist").innerHTML=list[3].artist; 
document.getElementById("list3title").innerHTML=list[3].title; 
document.getElementById("list3label").innerHTML=list[3].label; 
document.getElementById("list3albumyear").innerHTML=list[3].albumyear; 
document.getElementById("list3picture").innerHTML='<img src="/testsite/covers/' + list[3].picture + '" width="83px" height="83px"/>'; 

document.getElementById("list4artist").innerHTML=list[4].artist; 
document.getElementById("list4title").innerHTML=list[4].title; 
document.getElementById("list4label").innerHTML=list[4].label; 
document.getElementById("list4albumyear").innerHTML=list[4].albumyear; 
document.getElementById("list4picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="83px" height="83px"/>'; 
    } 


} 
}; 

xmlhttp.onerror = function() 
{ 
    clearTimeout(timer); 
    }; 

xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true); 
xmlhttp.send(); 


timer = setTimeout(getPlaylist, 1000); 
}

CSS動畫：

<!DOCTYPE html> 
<html> 
<head> 
<script src="/testsite/OneSecondPlaylist.js"></script> 
<style type="text/css"> 

#wrapper { 
    width: 257.4px; 
    height: 41.85px; 
    overflow: hidden; 
    background-color: #383838; 
    color: #FFFFFF; 
    line-height: 41.85px; 
    font-size: 80%; 
    font-family: baumans; 
    color: #FFFFFF; 
} 

.textbox { 
-moz-animation-duration: 4s; 
    -moz-animation-name: slidein; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: alternate; 
    -moz-animation-timing-function: linear; 
    white-space:nowrap; 
} 
@-moz-keyframes slidein { 
from { 
    margin-left:3%; 
    } 
to { 
    margin-left:-33%; 
    } 

</style> 
</head> 
<body onload="getPlaylist()"> 
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/baumans:n4:default.js" type="text/javascript"></script> 
<div id="wrapper"> 
    <div id="list0artist"></div> 
</div> 
<div id="wrapper"> 
    <div id="list0title" class="textbox"></div> 
</div> 

</body> 
</html>

動畫注：我知道我需要與webkits玩得到它的工作在所有瀏覽器

我希望我沒有包括o很多代碼，我覺得這是很重要的整體顯示它，因爲你可能有一些指針在我問的問題之外。

所以總結起來，我基本上要求你們幫我編寫一個JavaScript代碼/ CSS集成腳本，將基於我定義的規則進行動畫處理。

感謝您閱讀本文，我希望您不要以爲我是懶惰的要求，我覺得我正在爲那些沒有編碼知識，只需要一個正確的方向推進的人取得好的進展！非常感謝！！！賈斯汀..

來源

2014-02-19 Justin

是否有可能爲你建立一個小提琴顯示什麼進展你迄今所取得？ – badAdviceGuy

更好的是，你能給我們一個只輸出HTML，js和CSS的例子嗎？ –

@badAdviceGuy http://jsfiddle.net/Musicman/2hj2m/ – Justin

var texts = document.getElementsByClassName('text'); // Class I added to innards 

for (var i = 0; i < texts.length; i++) { 

    if (texts[i].parentNode.offsetWidth < texts[i].offsetWidth) { 
     texts[i].classList.add("textbox"); 
    } 
}

Demo

一些注意事項：

你不能有小數像素喜歡.4px，將或向下基於瀏覽器的
我在圍捕d建議在動畫中的某個點暫停，持續的移動讓用戶感到煩惱
使用邊距有點不確定，我可能會t代替使用left。這是我在演示

編輯

確實要解決這個定位的問題你可以使用轉換，而不是位置的動畫：絕對的。

transform:translateX(calc(-100% + 257px)); /* -100% + parent width */

Demo

但是就像我之前說的，用JS解決方案可能會更好

來源

2014-02-19 23:30:31

謝謝Zach，我如何使關鍵幀只具有足夠的動畫來從文字開始到結束（如在我的JSFiddle中:)） – Justin

這不就是我的演示正在做什麼？ –

是的，它正在工作，但如果文字長度變大或變小，那麼動畫將不會在正確的位置結束，因爲關鍵幀設置會有一個很大的空白區域http://jsfiddle.net/Musicman/4aqAp/ – Justin

使用JavaScript和CSS動畫來創建一個文本框選

回答

相關問題