如何讓我的旋轉動畫RSS飼料與jQuery和PHP正常工作？

我是一名平面設計的學生，這是我的第一個問題。對於我的一個項目，我正在嘗試爲rss提要製作一個圖形旋轉顯示。十條新聞頻道組成一顆順時針旋轉的星星。當談到jQuery，Ajax和PHP時，我是一名初學者。我的老師幫助過我，但由於時間有限，他無法向我解釋所有的事情，所以我明白了一切。所以我被一段代碼困住了，或多或少做了我希望做的事情，除非按照我的意圖進行旋轉。如何讓我的旋轉動畫RSS飼料與jQuery和PHP正常工作？

This is an image of what it looks like

它應該順時針方向旋轉，並繼續旋轉，同時它刷新，但不知何故，幾秒鐘後分開線開始逆時針旋轉。我認爲這與設置的旋轉角度有關，但我對如何解決它毫無頭緒。

這是我到目前爲止的代碼：的index.html

<html> 
    <head> 
     <title>News</title> 
     <link rel='stylesheet' type='text/css' href='stylesheet.css' /> 
     <script src="zepto.js"></script> 
     <script src="zepto.fx.js"></script> 
     <script type='text/javascript' src='script.js'></script> 
    </head> 
    <body> 
     test 
    </body> 
</html>

stylesheet.css中

body { 
    background-color: #000; 
} 

div { 
    font-family: Arial; 
    color: #FFFFFF; 
    font-size: 10pt; 
} 

.line { 
    transform-origin: 50% 50%; 
    text-align: center; 
    width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

.block { 
    text-align: center; 
    width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    height: 500px; 
}

這是那麼的JQuery /的Zepto部分：的script.js

var rotations = [0,18,36,54,72,90,108,126,144,162]; 

$(document).ready(function(){ 
    $.get("ajax.php", function(r) { 
     var json = $.parseJSON(r); 
     console.log(json); 
     for(var i = 0; i < json.length; i++) { 
      var block = $('<div class="block"></div>'); 
      $("body").append(block); 
      for(var j = 0; j < json[i]["lines"].length; j++) { 
       var line = $('<div class="line">'+json[i]["lines"][j]+'</div>'); 
       block.append(line); 
       rotateLine(line); 
      } 
     }; 
    }); 

}); 
function rotateLine(obj) { 
    i = obj.index(); 
    rotation = obj.attr("rotation"); 
    if(!rotation) rotation = rotations[i]; 
    else rotation = rotation*1+180; 
    if(rotation > 360) rotation -= 360; 
    obj.attr("rotation", rotation); 
    console.log(rotation); 
    obj.animate({ 
     'rotateZ': rotation+'deg' 
    }, 
     10000, 
     'linear', function() { rotateLine(obj)}); 
}

和最後部分： ajax.php

 <?php 
    $f = file_get_contents("http://news.google.nl/news?pz=1&cf=all&ned=nl_nl&hl=nl&output=rss");//http://news.google.nl/news?pz=1&cf=all&ned=nl_nl&hl=nl&output=rss"); 
    $news = new SimpleXMLElement($f); 
    $result = array(); 
    for($i=0; $i < 10; $i++) { 
     preg_match("/story\?ncl=([^&]*)/",$news->channel->item[$i]->description, $matches); 
     //var_dump($matches);  
     $g = file_get_contents('http://news.google.nl/news?pz=1&cf=all&ned=nl_nl&hl=nl&output=rss&ncl='.$matches[1]); 
     $item = new SimpleXMLElement($g); 
     //echo '<div class="line">'.($news->channel->item[$i]->title).' - <a href="http://news.google.nl/news?pz=1&cf=all&ned=nl_nl&hl=nl&output=rss&ncl='.$matches[1].'">link</a><br />'; 
     $resultitem = array(); 
     $resultitem["title"] = ($news->channel->item[$i]->title).' - '.$news->channel->item[$i]->pubDate; 
     $resultitem["lines"] = array(); 
     for($j=0; $j < 10; $j++) { 
      $resultitem["lines"][] = ($item->channel->item[$j]->title).' - '.$item->channel->item[$j]->pubDate; 
     } 
     $result[] = $resultitem; 

    } 
    echo json_encode($result); 

?>

我對文字的數量道歉，但正如我所說，我已經被他的老師一起工作給予了很多的代碼是初學者。任何幫助都感激不盡！此致埃爾克（荷蘭）

來源

2015-05-01 Eelke Veenstra

如果您註釋掉行：'如果（旋轉> 360）旋轉 - = 360;'不使它做你想做的事？ –

感謝您的建議。我試過了，它的效果已經比較好了，除了隨着時間的推移（假設大約一分鐘左右），各條線以比其餘線更高的速度開始旋轉。當更快的線路完成一個整圓時，它再次連接到其他線路的速度。 –

爲什麼不只是使用css3？無需JavaScript，然後再

看到我的jsfiddle這裏： https://jsfiddle.net/8mhrmoh4/1/

.spinner { 
    vertical-align: middle; 
    -moz-animation: 2s rotate infinite linear; 
    -moz-transform-origin: 50% 50%; 
    -webkit-animation: 2s rotate infinite linear; 
    -webkit-transform-origin: 50% 50%; 
} 
@-moz-keyframes rotate { 
    0 { 
    -moz-transform: rotate(0); 
    } 
    100% { 
    -moz-transform: rotate(360deg); 
    } 
} 
@-webkit-keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    } 
}

來源

2015-05-01 17:59:10 WIRN

感謝您的建議。我瞭解你的代碼。然而，它是在javascript/jQuery中，div類是由rss提要生成的。所以，當我使用你的css3代碼（這看起來很容易理解），那麼我將不再有我可以應用CSS旋轉的div？或者我在推理中錯過了什麼？ –

我不是100％確定你的意思，但你可以插入元素到您的DOM和CSS規則將適用於他們。看看我的修改示例https://jsfiddle.net/8mhrmoh4/3/。 Spinner元素也可能來自你的ajax方法 – WIRN

這是怎麼回事？解決了嗎？ – WIRN

如何讓我的旋轉動畫RSS飼料與jQuery和PHP正常工作？

回答

相關問題