个人中心
gpt4 book ai didi

php - 如何让我的旋转动画 RSS 提要与 jQuery 和 php 一起正常工作？

转载 作者：行者123 更新时间：2023-12-01 05:42:18 25 4
gpt4 key购买 nike

我是一名平面设计学生，这是我的第一个问题。对于我的一个项目，我正在尝试为 rss feed 制作图形旋转显示。十行新闻源组成一颗顺时针旋转的星星。我是 jQuery、Ajax 和 PHP 的初学者。我的老师一直在帮助我，但由于时间有限，他无法以我理解的方式向我解释所有内容。所以我被困在一段代码中，除了按照我想要的方式旋转之外，它或多或少地完成了我想要它做的事情。

This is an image of what it looks like

它应该顺时针旋转，并在刷新时继续旋转，但不知何故，几秒钟后，单独的线开始逆时针旋转。我认为这与设置的旋转角度有关，但我不知道如何解决它。

这是我到目前为止的代码:索引.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>

样式表.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 部分:脚本.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(荷兰)

最佳答案

为什么不直接使用 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);
  }
}

关于php - 如何让我的旋转动画 RSS 提要与 jQuery 和 php 一起正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29991462/

25 4 0
文章推荐： python - 保存到文件并加载 python 类的实例及其属性
文章推荐： youtube - 我如何从 youtube URL 获取 flv 文件路径
文章推荐： MIPS流水线时序图
文章推荐： tree - 使用抽象基类类型遍历整个 JAXB 对象树
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com