时间戳

首页 > 解决方案 > 如何为 AMP-HTML 创建 CSS 新闻代码？

javascript - 如何为 AMP-HTML 创建 CSS 新闻代码？

问题描述

这是 jQuery 的一个很好的例子，但它不是 AMP 的有效 jQuery

$(document).ready(function() {
    try {
        var ticker_holder = $('.ticker-holder').get(0);
        var ticker_text = $('.ticker').get(0);
        var ticker_pos = ticker_text.parentNode.offsetWidth;

        var ticker_data = $(ticker_holder).html();
        $(ticker_text).parent().html('<marquee scrollamount="10" scrolldelay="">' + ticker_data + '</marquee>');

        $('.emergencyalert').hover(

        function() {
            $('marquee', this).get(0).stop();
        }, function() {
            $('marquee', this).get(0).start();
        });


    }
    catch (o) {}
});

AMP 中是否有任何组件可以执行此类操作？

标签： javascripthtmlcssamp-html

解决方案

<marquee>元素已从 HTML5 中删除。我建议你可以从 css 动画中实现选框效果。AMP 没有任何此类具有选框等功能的组件。这是我在 AMP 游乐场测试的代码，并添加了类似字幕的效果。您可以进一步修改它以达到您正在寻找的完全相同的效果。

<!doctype html>
<html ⚡&gt;
<head>
<meta charset="utf-8">
  <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-autocomplete/index.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

  <title>amp-autocomplete</title>

  <style amp-custom>
    .wrap{
      position: relative;
    }
    .ul-list{
      list-style: none;
      
    }
    .li-list{
      display: inline-block;
      padding: 1em 2em;
      font-size: 1.2em;
    }
    .spot-anim {
      position: absolute;
      right: -1em;
      transform: translateX(-100%);
      will-change: transform;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      -webkit-animation-name: marquee;
      -moz-animation: marquee;
      -o-animation-name: marquee;
      animation-name: marquee;
    }
  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <div class="wrap">
    
    <ul class="ul-list spot-anim">
      <li class="li-list"> News number 1</li>
      <li class="li-list"> News number 2</li>
      <li class="li-list"> News number 3</li>
      <li class="li-list"> News number 4</li>
  </ul>
  
  </div>
  <style amp-keyframes>

        @keyframes marquee {
          0% {
          transform: translateX(100%);
          }
          100% {
          transform: translateX(-150%);
          }
        }

  </style>
</body></html>

您也可以在此处使用带有 layout="fixed-height" 的 amp-script 来实现相同的动画，并使用 javascript 在鼠标悬停事件上停止功能。

推荐阅读