如何使用Google AMP中的amp-bind动态更改/更新图像？

本文概述

HTML代码实例
HTML代码实例

有时你想向AMP页面添加自定义交互性, 以使页面看起来更加用户友好和用户调用。尽管AMP的预建组件受到限制, 但还是通过amp-bind来解决此问题。它可以帮助开发人员在不使用AMP预制组件的情况下向页面添加自定义交互性。你可以使用amp-bind在用户与页面交互时动态更改文本。

设定：要在页面中使用amp-bind, 必须将其脚本导入文档的标题中。

HTML代码实例

<script async custom-element = "amp-bind"
     src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>

Google AMP的放大器绑定包括三个主要概念：

州：状态变量负责根据用户操作在页面上进行更新。定义状态变量非常重要。
表达：它们就像用于引用状态的JavaScript表达式一样。
捆绑：它们是一种特殊的属性, 用于通过表达式将元素的属性链接到状态。

例子：

HTML代码实例

<!doctype html>
<html amp>
 
<head>
     <meta charset = "utf-8">
     <title>Google AMP amp-bind</title>
 
     <link rel = "canonical" href =
"https://amp.dev/documentation/examples/components/amp-bind/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>
 
     <script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
     </script>
 
     <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>
 
     <style amp-custom>
         h1 {
             color: forestgreen;
             text-align: center;
         }
 
         .gfgNew {
             border: 5px solid crimson;
         }
 
         .gfgOld {
             border: 5px solid orange;
         }
     </style>
</head>
 
<body>
     <h1>
         Geeks For Geeks
     </h1>
 
     <amp-state id = "gfg">
         <script type = "application/json">
           {
             "new": {
               "imageUrl":
"https://media.srcmini.org/wp-content/cdn-uploads/gfg_200x200-min.png", "style": "gfgNew"
             }, "old": {
               "imageUrl":
"https://media.srcmini.org/wp-content/uploads/20201026154131/logogfg.png", "style": "gfgOld"
             }
         }
       </script>
     </amp-state>
 
     <div style = "padding: 1em;">
         
<p>
             Each logo has different border color...
         </p>
 
         <h4 ="'This is ' + logo + ' logo...'">
             This is old logo...
         </h4>
         <center>
             <amp-img width = "200" height = "200" src =
"https://media.srcmini.org/wp-content/uploads/20201026154131/logogfg.png"
                 [src]="gfg[logo].imageUrl"
                 class = "gfgOld"
                 [class]="gfg[logo].style">
             </amp-img>
             <br>
             <button on = "tap:AMP.setState({logo: 'new'})">
                 New Logo
             </button>
             <button on = "tap:AMP.setState({logo: 'old'})">
                 Old Logo
             </button>
         </center>
     </div>
</body>
 
</html>

输出如下：

按下”新徽标”按钮时, 图像和边框颜色都动态更改。当我们点击”旧徽标”按钮时, 图像和边框颜色更改为先前的组合。

来源：

https://www.srcmini02.com/68426.html

本文概述

HTML代码实例

例子：

HTML代码实例

输出如下：

猜你喜欢