Как заставить мой ротационный анимированный RSS-канал работать правильно с jQuery и php?
Я студент графического дизайна, и это мой первый вопрос здесь. Для одного из моих проектов я пытаюсь сделать графическое отображение поворота для RSS-канала. Десять линий новостных лент составляют звезду, которая вращается по часовой стрелке. Я начинающий, когда дело доходит до JQuery, Ajax и PHP. Мой учитель помог мне в этом, но из-за ограниченного времени он не смог объяснить мне все так, чтобы я все понял. Так что я застрял на кусочке кода, который более или менее выполняет то, что я хочу, кроме поворота так, как я хотел.
Предполагается, что он вращается по часовой стрелке и продолжает вращаться, пока обновляется, но каким-то образом через пару секунд отдельные линии начинают вращаться против часовой стрелки. Я думаю, что это связано с заданными углами поворота, но я не знаю, как это решить.
Это мой код до сих пор:
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);
?>
Мои извинения за объем текста, но, как я уже сказал, я новичок, которому его учитель дал много кода для работы. Любая помощь будет высоко ценится!
С наилучшими пожеланиями, Eelke (NL)
Решение
Почему бы просто не использовать 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); } }
Другие решения
Других решений пока нет …