组件 API

`gwd-360gallery`

用于显示正在轮播的某个对象的图库对象。

属性

名称	说明
`images:string`	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
`autoplay:boolean`	图库加载后是否自动播放其中的图片。
`wrap:boolean`	图库是否允许用户在滑动图片时循环浏览，而不在图片序列的首尾帧停下。

事件

名称	说明
`firstinteraction`	当用户首次与图库互动时发送。
`allframesviewed`	当图库的所有帧都已至少显示一次时发送。
`allframesloaded`	当图库的所有帧都已加载完毕时发送。
`frameshown`	当显示新帧时发送。
`frameactivated`	当开始启动新帧（即使新帧尚未显示）时发送。
`frametap`	当用户点按任意帧时发送。

方法

名称	说明
`goToFrame(frame:number, opt_animate:string, opt_direction:string)`	为指定的帧添加动画效果。
`rotateOnce(opt_duration:number, opt_direction:string)`	轮播一次图库中的对象。
`goForwards()`	将图库向前移动一帧。
`goBackwards()`	将图库向后移动一帧。

添加到日历

`gwd-addtocalendar`

向日历中添加活动。

属性

名称	说明
`event-title:string`	将在用户日历中显示的活动名称。
`start-date:string`	活动的开始日期。
`start-time:string`	活动的开始时间（24 小时制）。
`end-date:string`	活动的结束日期。
`end-time:string`	活动的结束时间（24 小时制）。
`timezone:string`	活动的时区。设置该属性后，当用户位于其他时区时，系统会调整显示为当地的正确时间。
`location:string`	活动地点。
`description:string`	活动说明。
`icalendar:boolean`	是否使用 iCalendar 文件。
`google:boolean`	是否使用 Google 日历。
`windows-live:boolean`	是否使用 Windows Live 日历。
`yahoo:boolean`	是否使用 Yahoo! 日历。
`bg-color:string`	表示下拉菜单背景颜色的十六进制值。
`font-color:string`	表示下拉菜单字体颜色的十六进制值。
`font-family:string`	下拉菜单字体的名称。
`font-size:string`	下拉菜单字体的大小。
`font-weight:string`	下拉菜单字体的粗细。
`highlight-color:string`	表示下拉菜单突出显示颜色的十六进制值。

音频

`gwd-audio`

一种组件，用于封装 HTMLAudioElement。

属性

名称	说明
`autoplay:boolean`	音频加载完毕时是否自动播放。
`loop:boolean`	音频播放完毕时是否循环播放。
`muted:boolean`	音频在开始播放时是否静音。
`controls:boolean`	是否启用默认的原生播放器控件。
`sources:string`	一系列不同格式的音频来源，各来源间以英文逗号分隔。

事件

名称	说明
`play`	当媒体在之前的暂停事件后又开始播放时发送。
`pause`	暂停播放时发送。
`playing`	当媒体开始播放（无论是首次播放、暂停后又开始播放，还是结束播放后又重新开始播放）时发送。
`ended`	播放完毕时发送。
`volumechange`	当音量发生变化（包括设置音量和更改静音属性）时发送。
`seeked`	跳转操作完成时发送。
`waiting`	当因为有其他操作（如跳转）尚未完成而导致请求的操作（如播放）被延迟时发送。

方法

名称	说明
`mute()`	切换音频的静音/取消静音状态。
`pause()`	暂停音频。
`play()`	播放音频。
`replay()`	重新播放音频。
`seek(time:number)`	跳至音频中的指定时间。

轮播式图库

`gwd-carouselgallery`

一种图库对象，能够以轮播方式显示各个帧。

属性

名称	说明
`images:string`	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
`groups:string`	一系列组 ID，各 ID 间以英文逗号分隔。
`transition-duration:number`	图库动画播放速度（以毫秒为单位）。
`start-frame:number`	最开始显示的图片的编号。
`autoplay:boolean`	是否让所有帧都自动播放一次。
`has-navigation:boolean`	是否自动包含图库导航控件。
`navigation-thumbnails:boolean`	是否使用缩略图（而非圆点）进行导航。
`navigation-highlight:color`	在导航中用于突出显示活动帧的 CSS 颜色代码。
`scaling:string`	如何缩放图片内容以适应帧的大小。
`frame-width:number`	一个内容面板的宽度。
`frame-height:number`	一个内容面板的高度。
`neighbor-rotation-y:number`	让当前居中面板的邻近面板绕 Y 轴旋转的角度，用于使邻近面板倾斜。
`neighbor-translation-x:number`	让当前居中面板的邻近面板沿 X 轴平移的距离，用于调整邻近面板的位置。
`neighbor-translation-y:number`	让当前居中面板的邻近面板沿 Y 轴平移的距离。
`neighbor-translation-z:number`	让当前居中面板的邻近面板沿 Z 轴平移的距离。
`exit-urls:string`	一系列与图库中的图片对应的退出网址，各网址间以英文逗号分隔。
`show-reflection:boolean`	是否显示采用 CSS3 实现的反射效果。
`pause-front-media:boolean`	当前帧发生变化时，是否暂停上一帧中的媒体元素（例如，视频或音频）。
`resume-next-media:boolean`	当前帧发生变化时，是否在新的当前帧中继续播放媒体元素（例如，视频或音频）。

事件

名称	说明
`firstinteraction`	当用户首次与图库互动时发送。
`allframesviewed`	当图库的所有帧都已至少显示一次时发送。
`allframesloaded`	当图库的所有帧都已加载完毕时发送。
`autoplayended`	当自动播放因任何原因结束时发送。如果是因达到预期的播放时长而自然结束，那么 `event.detail.completed` 将为 true，否则为 false。
`frameshown`	当显示新帧时发送。
`frameactivated`	当开始启动新帧（即使新帧尚未显示）时发送。
`frameautoplayed`	当帧已启动以自动播放时发送。此事件的触发频率可能高于 `frameshown`，这是因为系统会针对同时显示的多个帧中的每个帧单独触发此事件。
`frametap`	当用户点按任意帧时发送。
`reachleftend`	当图库达到最左端时发送。
`reachrightend`	当图库达到最右端时发送。
`trackstart`	当鼠标拖动/触摸拖动操作开始时发送。
`track`	组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据。
`trackend`	当鼠标拖动/触摸拖动操作结束时发送。

方法

名称	说明
`goToFrame(index:number, opt_animate:string)`	转到指定帧。
`goForwards(opt_animate:string)`	转到下一帧（如果有）。
`goBackwards(opt_animate:string)`	转到上一帧。
`rotateOnce(opt_duration:number, opt_direction:string)`	让图库中的每个帧都显示一次。
`stopRotation()`	停止当前的自动轮播。

广告插入点

`gwd-cuepoint`

一种组件，附加到视频组件，用于在视频达到特定时间时触发事件。

属性

名称	说明
`time:number`	触发相应事件的时间，以秒为单位。

事件

名称	说明
`cuepoint`	当媒体播放已达到广告插入点中定义的时间时发送。

方法

名称	说明
`seek()`	将视频时间设为广告插入点的时间。
`setTime(time:number)`	设置广告插入点的时间。

日期交换

`gwd-dateswap`

日期交换功能将根据当前日期与目标日期范围的比较结果，更改元素的显示/隐藏状态。

属性

名称	说明
`from_date:string`	一个以 RFC2822 或 ISO 8601 格式表示日期的字符串。
`to_date:string`	一个以 RFC2822 或 ISO 8601 格式表示日期的字符串。

事件

名称	说明
`before`	当前日期早于 `from_date`（不包含此日期）时发送。
`during`	当前日期介于 `from_date` 和 `to_date`（包含此日期）之间时发送。
`after`	当前日期晚于 `to_date`（不包含此日期）时发送。

方法

名称	说明
`checkDate()`	将当前日期与日期范围进行比较。

图库导航

`gwd-gallerynavigation`

Google Web Designer 图库组件的导航控件。

属性

名称	说明
`for:string`	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
`highlight:color`	在导航中用于突出显示活动帧的 CSS 颜色代码。
`use-thumbnails:boolean`	是否使用缩略图（而非圆点）进行导航。

常规广告

`gwd-genericad`

用于实现常规广告容器。

事件

名称	说明
`adinitialized`	当常规元素马上要呈现广告内容时发送。

方法

名称	说明
`initAd()`	收到启动器触发的相应事件时启动广告。
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	转到展开后的广告。如果未指定页面 ID，广告会转到默认页面。
`exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)`	退出广告并可选择合拢广告。

手势

`gwd-gesture`

多个手势事件的抽象。

属性

名称	说明
`touch-action:string`	应如何解读触摸操作。有效值为 `auto`、`none`、`pan-x` 和 `pan-y`。默认行为与该属性设为 `none` 时的行为相同。

事件

名称	说明
`hover`	当鼠标位置/触摸位置进入组件边界时发送。
`hoverend`	当鼠标位置/触摸位置离开组件边界时发送。
`trackstart`	当鼠标拖动/触摸拖动操作开始时发送。
`track`	组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据。
`trackend`	当鼠标拖动/触摸拖动操作结束时发送。
`tap`	当记录到用户点按/鼠标点击操作时发送。
`swipeleft`	当用户向左滑动屏幕时发送。
`swiperight`	当用户向右滑动屏幕时发送。
`swipeup`	当用户向上滑动屏幕时发送。
`swipedown`	当用户向下滑动屏幕时发送。

Google 广告

`gwd-google-ad`

用于实现 Google 广告容器。

属性

名称	说明
`polite-load:boolean`	相应广告是否必须遵循礼让加载语义。
`fullscreen:boolean`	相应广告是否尝试展开至全屏。

事件

名称	说明
`adinitialized`	当元素马上要呈现广告的内容时发送。
`expandstart`	当启动器触发展开开始事件时发送。
`expandfinish`	当启动器触发展开结束事件时发送。
`collapsestart`	当启动器触发合拢开始事件时发送。
`collapsefinish`	当启动器触发合拢结束事件时发送。
`fullscreensupport`	支持全屏展开时发送。

方法

名称	说明
`initAd()`	收到启动器触发的相应事件时启动广告。
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	转到展开后的广告。如果未指定页面 ID，广告会转到默认页面。
`exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	退出广告并可选择合拢广告。
`exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	退出广告后转到指定网址（无论在 Studio 中指定的值是什么）。如果 `opt_collapseOnExit` 为 true，则合拢广告。
`incrementCounter(metric:string, opt_isCumulative:boolean)`	跟踪计数器事件。
`startTimer(timerId:string)`	启动事件计时器。
`stopTimer(timerId:string)`	停止事件计时器。
`reportManualClose()`	记录浮动广告、弹出式广告、展开式广告、带弹出式内容的页内广告或带浮动内容的页内广告的手动关闭操作。此方法是 `Enabler.reportManualClose` 的替代方法。

热点

`gwd-hotspot`

一种组件，在视频的特定时间显示和隐藏热点。

属性

名称	说明
`show-time:number`	热点开始显示的时间，以秒为单位。
`hide-time:number`	热点停止显示的时间，以秒为单位。
`left:string`	视频前方热点的左侧位置（以相对于视频帧宽度的位置值表示，例如 5%）。
`top:string`	视频前方热点的顶部位置（以相对于视频帧高度的位置值表示，例如 5%）。
`width:string`	视频前方热点的宽度（以相对于视频帧宽度的位置值表示）。
`height:string`	视频前方热点的高度（以相对于视频帧高度的位置值表示）。

事件

名称	说明
`hotspotshown`	当热点变为可见时发送。
`hotspothidden`	当热点被隐藏时发送。

方法

名称	说明
`show(showHide:boolean)`	更改热点显示/隐藏状态。如果 `showHide` 为 true，则显示热点；如果 `showHide` 为 false，则隐藏热点。
`seek(showHide:boolean)`	将视频时间设为热点的显示时间或隐藏时间。如果 `showHide` 为 true，则使用显示时间；如果 `showHide` 为 false，则使用隐藏时间。
`setTimes(showTime:number, hideTime:number)`	设置热点的显示时间和隐藏时间。

iframe

`gwd-iframe`

一种组件，用于封装 HTMLIframeElement。

属性

名称	说明
`source:string`	iframe 的来源。此来源将替换原生图片元素中的 `src` 属性。
`scrolling:string`	iframe 是否显示滚动条。

事件

名称	说明
`iframeload`	当 iframe 加载完毕时发送。

方法

名称	说明
`setUrl(url:string)`	更改 iframe 的网址并立即加载 iframe。

图片

`gwd-image`

一种组件，用于封装 HTMLImageElement 以支持延迟加载图片来源。

属性

名称	说明
`source:file`	图片的来源。此来源将替换原生图片元素中的 `src` 属性。
`alt:string`	图片的替代文字。
`scaling:string`	定义图片在适应帧尺寸时采用的缩放方式。
`alignment:string`	图片在观看区域内的对齐方式。

图片按钮

`gwd-imagebutton`

一种图片按钮，支持以下状态：鼠标未按下/鼠标悬停其上/鼠标按下。

属性

名称	说明
`up-image:file`	按钮处于未按下状态时所用图片的网址。
`over-image:file`	按钮处于鼠标悬停其上状态时所用图片的网址。
`down-image:file`	按钮处于按下状态时所用图片的网址。
`bgcolor:string`	按钮的背景颜色。
`alignment:string`	图片在观看区域内的对齐方式。
`scaling:string`	图片在父级容器中的尺寸调整方式。
`disabled:boolean`	是否停用按钮。

事件

名称	说明
`imagebuttonloaded`	当所有图片都已加载完毕时发送。

方法

名称	说明
`toggleEnable()`	在已启用/已停用之间切换。
`setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)`	为所有按钮状态设置图片来源。

地图

`gwd-map`

用于扩展 HTMLElement 以封装 Google Maps API 调用

属性

名称	说明
`api-key:string`	Google API 密钥。请访问 https://developers.google.com/maps/documentation/javascript/get-api-key。
`query:string`	用于从 Google Places API 返回位置信息的搜索查询的名称。如果没有数据融合表 ID，则必须提供该名称。
`start-latitude:decimal`	起始中心纬度坐标。值必须介于 -90 到 90（度）之间。
`start-longitude:decimal`	起始中心经度坐标。值必须介于 -180 到 180（度）之间。
`request-user-location:boolean`	是否必须要求提供用户位置信息。如果设为 true，系统将提示用户分享其位置信息。
`fusion-table-id:string`	公开 Google 数据融合表 ID。
`client-id:string`	Google Maps Premier 客户端 ID。（已弃用）
`search-radius:number`	位置搜索范围的最小半径（以米为单位）。
`result-limit:number`	单个查询中可返回的结果数量上限。
`start-zoom:number`	起始缩放级别（采用 Google Maps API 所使用的单位）。默认级别为 16，即邻域级别。
`marker-src:string`	地标图片文件名（作为包含关闭、开启和阴影组件的子画面）。
`gps-src:string`	GPS 定位蓝点图片文件名。
`msg-start-position-prompt:string`	对话框中提示选择起始位置的文字的本地化字符串。
`msg-gps-button-label:string`	用于从 Geolocation API 检索用户位置信息的按钮所用标签的本地化字符串。
`msg-manual-position-button-label:string`	用于显示位置搜索字段的按钮所用标签的本地化字符串。
`msg-manual-position-prompt:string`	对话框中提示搜索起始地图位置的文字的本地化字符串。
`msg-manual-position-placeholder:string`	用于查找起始地图位置的搜索框所用占位文字的本地化字符串。
`msg-geocode-failure:string`	当使用 Geolocation API 的尝试失败时显示的对话框提示文字的本地化字符串。
`msg-no-results-found:string`	在所选位置未找到任何地图结果时显示的对话框提示文字的本地化字符串。

事件

名称	说明
`pinclick`	当用户在地图上选择图钉时。

方法

名称	说明
`setCenter(latitude:number, longitude:number, opt_accuracy:number)`	将根据纬度/经度指定的位置设为地图中心。

页面

`gwd-page`

一个页面表示页面组中的单个卡片。

属性

名称	说明
`expanded:boolean`	相应页面是否被视为展开后页面（广告专用）。
`centered:boolean`	相应页面的内容是否居中放置。
`alt-orientation-page:string`	适合以其他屏幕方向呈现内容的页面对应的页面 ID。

事件

名称	说明
`attached`	当页面附加到 DOM 后立即发送。
`detached`	当页面从 DOM 中移除后立即发送。
`pageactivated`	当页面可以开始显示时发送。
`pagedeactivated`	当页面不再显示时发送。
`pageload`	当页面内容成功加载后发送。
`pagepresenting`	当页面马上要开始其简介动画时发送。
`shake`	当检测到设备摇晃手势时发送。
`tilt`	当检测到设备倾斜时发送。
`rotatetoportrait`	当设备旋转为纵向时发送。
`rotatetolandscape`	当设备旋转为横向时发送。

页面组

`gwd-pagedeck`

页面组是包含多个页面的容器。页面组一次展示一个页面，并且各个不同的页面可以按任何指定顺序、并采用任意受支持的页面转换方式循环展示。

属性

名称	说明
`default-page:string`	默认页面的 ID。

事件

名称	说明
`pagetransitionstart`	在页面转换开始前发送。
`pagetransitionend`	在页面转换完成后发送。

方法

名称	说明
`goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	前往页面组中的下一页。
`goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	前往页面组中的上一页。
`goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	前往页面组中的指定页。
`getCurrentPage()`	返回当前页面；如果未显示任何页面，则返回 null。
`getDefaultPage()`	如果已指定默认页面，则返回默认页面，否则返回第一个页面。
`getPage(pageId:string)`	返回具有指定 ID 的页面。
`findPageIndexByAttributeValue(attributeName:string, value:string\|number\|boolean)`	返回该属性的值等于指定值的页面元素；如果未找到任何页面，则返回 -1。
`getOrientationSpecificPage(orientation:string, pageId:string)`	返回对应指定屏幕方向的页面。
`getElementById(id:string)`	在此页面组中的所有页面中找到指定 ID 对应的元素。由于 `gwd-pagedeck` 仅保留 DOM 中的活动页面，因此标准的 `document.getElementById(id)` 将不会返回非活动页面中的元素。引用非活动页面中的元素是一种很常见的情况（尤其是在动态广告中）。在这些情况下，可以使用此方法按元素 ID 取消对相应元素的引用。

示例

暂停 2 秒后转到广告中的下一个页面

此代码示例假定您的广告中至少有 2 个页面。然后，您便可仿照以下示例创建一个事件，以使系统每 2 秒就更改一次页面：

目标 - 选择相应的页面。第一个页面为 page1。
事件 - 依次选择页面 > 可以呈现页面了
操作 - 依次选择自定义 > 添加自定义操作

在“自定义代码”对话框中，为您的函数命名。在此示例中，您可以指定一个诸如 turnpage 之类的名称。然后，粘贴以下代码：

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

接下来，使用相同的自定义操作，分别向各个页面添加同一事件。

视差

`gwd-parallax`

视差组件。

属性

名称	说明
`images:string`	占位符属性，可供“属性”面板显示视差 `assetList` 控件。
`yscroll:decimal`	在场景中呈现视差动画时使用的滚动系数。

事件

名称	说明
`ready`	当视差组件中的所有素材资源都已加载完毕时发送。

粒子效果

`gwd-particleeffects`

一种组件，可显示由粒子系统生成的动画。组件中的每种粒子效果也都有自己的一组属性。

属性

名称	说明
`autoplay:boolean`	组件加载完毕后是否自动播放动画。
`time-limit:number`	动画时间限制。值 -1 表示没有时间限制。默认值为 29 秒。

各种效果的属性

`gwd-particles`

属性

名称	说明
`acceleration-x:number`	水平加速度。每帧的水平速度变化速率，该速率会与粒子的当前水平速度相加。
`acceleration-y:number`	垂直加速度。每帧的垂直速度变化速率，该速率会与粒子的当前垂直速度相加。
`angle-max:number`	粒子移动初始方向的最大角度，介于 -360 到 360 之间。
`angle-min:number`	粒子移动初始方向的最小角度，介于 -360 到 360 之间。
`autoplay:boolean`	在父粒子效果组件开始播放时是否自动播放动画。
`color1:color`	第一种颜色。
`color2:color`	第二种颜色。
`emit-interval:number`	新生成的每个粒子之间的帧数。
`emit-x-max:string`	粒子原始区域的最大 x 坐标。
`emit-x-min:string`	粒子原始区域的最小 x 坐标。
`emit-y-max:string`	粒子原始区域的最大 y 坐标。
`emit-y-min:string`	粒子原始区域的最小 y 坐标。
`loop:boolean`	是否循环播放动画。
`number:number`	未停止或未循环播放该效果的动画时生成的粒子总数。
`opacity-min:number`	粒子的最小初始不透明度。
`opacity-max:number`	粒子的最大初始不透明度。
`opacity-rate:number`	每帧的不透明度变化速率，该速率会与粒子的当前不透明度相加。
`random-colors:boolean`	是否以介于 `color1` 和 `color2` 之间的随机颜色生成粒子。如果为 `false`，则所有粒子都初始化为 `color1`。
`shape:string`	粒子的形状。 `square` `circle` `line` `teardrop` `image`
`size-max:number`	粒子的最大尺寸（以像素为单位）。
`size-min:number`	粒子的最小尺寸（以像素为单位）。
`size-rate:number`	每帧的尺寸变化速率，该速率会与粒子的当前尺寸相加。
`skip-forward:number`	动画的起点，以占所生成的粒子总数的百分比表示。
`speed-max:number`	每帧的粒子最大速度（以像素为单位）。
`speed-min:number`	每帧的粒子最小速度（以像素为单位）。
`sprite-image-src:file`	粒子形状的图片来源。
`turbulence-frequency:number`	湍流的频率。值越高，动画中的不规则变化就越频繁。它应该是一个正数。
`turbulence-rate:number`	强度随时间变化的速率。
`turbulence-strength:number`	对粒子施加的湍流强度。它应该是一个正数。
`turbulence-trail:number`	要渲染粒子的多少个先前状态和当前状态。

事件

名称	说明
`timelimitreached`	当动画播放达到指定的时间限制时发送。

方法

名称	说明
`play()`	播放动画。
`pause()`	暂停动画。
`stop()`	停止动画。

雪碧图

`gwd-spritesheet`

显示“雪碧图”中的一个关键帧或动画。

属性

名称	说明
`imagesource:file`	“雪碧图”文件的网址。
`offsetx:number`	“雪碧图”的左边缘距离以下任一边缘的偏移量（以像素为单位）：要使用的“雪碧图”文件中特定图片的左边缘制作动画时使用的首张子图的左边缘
`offsety:number`	“雪碧图”的上边缘距离以下任一边缘的偏移量（以像素为单位）：要使用的“雪碧图”文件中特定图片的上边缘制作动画时使用的首张子图的上边缘
`clipwidth:number`	以下任一图片的宽度（以像素为单位）：要使用的“雪碧图”文件中的特定图片制作动画时使用的首张子图
`clipheight:number`	以下任一图片的高度（以像素为单位）：要使用的“雪碧图”文件中的特定图片制作动画时使用的首张子图
`alignment:string`	确定图片在容器内的位置。
`scaling:string`	确定各种尺寸的图片在组件内的显示方式。
`totalframecount:number`	动画包含的帧数。
`duration:number`	每一帧的时长（以毫秒为单位）。
`loopcount:number`	动画重复播放的次数。如果设为 0，则为不限次数重复播放。
`autoplay:boolean`	动画是否自动播放。
`endonstartframe:boolean`	动画是否在初始帧结束播放。
`reverseplay:boolean`	动画是否反向播放。

事件

名称	说明
`animationend`	当动画结束时发送。
`animationpause`	当动画暂停播放时发送。
`animationplay`	当动画开始播放时发送。
`animationrestart`	当动画暂停播放后又重新开始播放时发送。

方法

名称	说明
`newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)`	定义新动画。
`play()`	播放动画。
`pause()`	暂停动画。
`togglePlay()`	在播放和暂停播放动画之间切换。
`restart()`	重放动画。
`previousFrame()`	显示上一帧。
`nextFrame()`	显示下一帧。
`goToFrame(id:number)`	通过帧号显示特定帧。

星级

`gwd-starratings`

一个用于呈现一行星形（供评分使用）的组件。

属性

名称	说明
`ratingvalue:decimal`	评分值。
`iconsize:number`	星形图标大小。
`isemptyshown:boolean`	是否显示空星形图标。
`isemptycolored:boolean`	空星形图标是否有颜色。
`colorprimary:color`	主要填充颜色。
`colorsecondary:color`	辅助渐变颜色。
`gradienttype:string`	渐变类型。
`ratingmax:number`	最高星级。
`ratingmin:number`	最低星级。

事件

名称	说明
`complete`	创建了星级图标时发送。
`validationerror`	星级评分值低于最低评分时发送。

街景

`gwd-streetview`

“Google 街景”组件

属性

名称	说明
`key:string`	您的 Google Maps Platform API 密钥。若想了解如何为您的应用获取一个唯一密钥，请访问：https://developers.google.com/maps/documentation/javascript/get-api-key。
`latitude:decimal`	相应位置的纬度值。
`longitude:decimal`	相应位置的经度值。
`interaction:boolean`	视图是否可以平移/旋转。
`heading:decimal`	指明相机的罗盘方向。可接受的值介于 0 到 360 之间（0 和 360 这两个值均表示“北”，值 90 表示“东”，值 180 表示“南”）。如果您没有指定罗盘方向，则系统会计算出一个值，将相机从进行最近距离的拍摄时所处的那个点指向指定的位置。
`pitch:decimal`	用于指定相机相对于街景拍摄车的向上或向下倾斜角度。这通常会是（但并非总是）水平角度。正值表示相机向上倾斜（90 度表示相机垂直向上）；负值表示相机向下倾斜（-90 度表示相机垂直向下）。
`zoom:number`	指定相机相对于街景拍摄车的缩放比例。

手滑式图库

`gwd-swipegallery`

在可滑动浏览的内容条中显示各个帧的图库对象。

属性

名称	说明
`images:string`	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
`groups:string`	一系列组 ID，各 ID 间以英文逗号分隔。
`transition-duration:number`	图库动画播放速度（以毫秒为单位）。
`start-frame:number`	指定从哪一帧开始播放（帧号是从 1 计起的）。
`num-frames-to-display:number`	一次显示的帧数。
`frame-snap-interval:number`	每滑动一下后前进的帧数。
`autoplay:boolean`	是否让图库自动轮播一次。
`has-navigation:boolean`	是否包含图库导航控件。
`navigation-thumbnails:boolean`	是否使用缩略图（而非圆点）进行导航。
`navigation-highlight:color`	在导航中用于突出显示活动帧的 CSS 颜色代码。
`scaling:string`	如何缩放图片内容以适应帧的大小。
`swipe-axis:string`	系统在该轴上检测到了滑动。
`offset:number`	相邻内容帧之间的空白区域的大小。
`frame-width:number`	一个内容帧的宽度。优先级高于 `num-frames-to-display`。
`frame-height:number`	一个内容帧的高度。
`autoplay-duration:number`	自动播放帧的总时长。
`autoplay-step-interval:number`	自动播放期间各帧之间的时间间隔。
`exit-urls:string`	一系列与图库中的图片对应的退出网址，各网址间以英文逗号分隔。
`disable-gesture:boolean`	隐藏/停用可为图库启用触摸导航的“手势”组件。
`pause-front-media:boolean`	当前帧发生变化时，是否暂停上一帧中的媒体元素（例如，视频或音频）。
`resume-next-media:boolean`	当前帧发生变化时，是否在新的当前帧中继续播放媒体元素（例如，视频或音频）。

事件

名称	说明
`firstinteraction`	当用户首次与图库互动时发送。
`allframesviewed`	当图库的所有帧都已至少显示一次时发送。
`allframesloaded`	当图库的所有帧都已加载完毕时发送。
`autoplayended`	当自动播放因任何原因结束时发送。如果是因达到预期的播放时长而自然结束，那么 `event.detail.completed` 将为 true，否则为 false。
`frameshown`	当所有必要的动画播放完毕后显示新帧时发送。
`frameactivated`	当开始启动新帧（即使新帧尚未显示）时发送。
`frameautoplayed`	当帧已启动以自动播放时发送。此事件的触发频率可能高于 `frameshown`，这是因为系统会针对同时显示的多个帧中的每个帧单独触发此事件。
`frametap`	当用户点按任意帧时发送。
`reachleftend`	当图库达到最左端时发送。
`reachrightend`	当图库达到最右端时发送。
`framemouseover`	当用户将鼠标移到帧上时发送。
`framemouseout`	当用户将鼠标从帧上移开时发送。
`trackstart`	当鼠标拖动/触摸拖动操作开始时发送。
`track`	组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据。
`trackend`	当鼠标拖动/触摸拖动操作结束时发送。

方法

名称	说明
`goToFrame(frame:number, opt_animate:string)`	转到指定帧。
`rotateOnce(opt_duration:number, opt_direction:string)`	让图库中的每个帧都显示一次。
`stopRotation()`	停止当前的自动轮播。
`goForwards()`	将图库向前移动一帧。
`goBackwards()`	将图库向后移动一帧。

示例

为手滑式图库中的每一帧显示图片说明

此代码示例展示了如何为手滑式图库中的每张图片创建图片说明，其中假设您已在场景中放置了一个 ID 为 gwd-swipegallery_1（默认 ID）的手滑式图库组件，并向此组件添加了图片。

对于图片说明，您还需创建一个 Div 元素，并为其指定 ID caption-div。然后，仿照以下示例创建一个事件：

目标 - 选择 ID 应为 gwd-swipegallery_1 的手滑式图库
事件 - 依次选择手滑式图库 > 已显示帧
操作 - 依次选择自定义 > 添加自定义操作

在“自定义代码”对话框中，为您的函数命名。在此示例中，您可以指定一个诸如 showcaption 之类的名称。然后，粘贴以下代码：

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
  1: "The text for frame 1",
  2: "The text for frame 2",
  3: "The text for frame 3"
};
div.textContent = text[gallery.currentIndex];

点按区域

`gwd-taparea`

点击/点按事件的抽象。

属性

名称	说明
`exit-override-url:string`	点按“点按区域”后退出的网址。

事件

名称	说明
`action`	当用户触摸（在移动设备上）或点击（在桌面设备上）按钮时发送。

点按通话/发短信

`gwd-taptocall`

一种组件，用于在用户点击或触摸后向指定的电话号码打电话或发短信。

属性

名称	说明
`number:string`	指定向哪个电话号码打电话或发短信。
`action:string`	选择是发短信还是打电话。

事件

名称	说明
`action`	当用户触摸（在移动设备上）或点击（在桌面设备上）按钮时发送。
`taptocall`	在打电话或发短信时发送。

方法

名称	说明
`dial()`	向指定的电话号码打电话或发短信。

过渡效果图库

`gwd-transitiongallery`

一种组件，可按顺序显示一系列图片，各张图片之间都带有动画效果。您可以在下面查找特定的过渡类型，以查看属性列表。

特定过渡类型的属性

过渡类型：百叶窗

`gwd-blinds`

过渡效果图库的百叶窗效果类型，新图片像从百叶窗后面露出来一样显示。

属性

名称	说明
`direction:string`	效果的方向。默认值为从左到右。 `lefttoright` - 从左到右。 `righttoleft` - 从右到左。 `toptobottom` - 从上到下。 `bottomtotop` - 从下到上。
`blinds:number`	帘叶的数量（1 至 20）。默认值为 5。
`transparentbackground:boolean`	是否在渲染新图片的百叶窗之前显示透明背景。如果为 `false`，则百叶窗会覆盖旧图片。

过渡类型：门式抹擦

`gwd-door-wipe`

过渡效果图库的一种抹擦效果变化形式，新图片像双扇门打开或关闭一样显示。

属性

名称	说明
`orientation:string`	动画效果的方向。 `horizontal` - 水平。 `vertical` - 垂直。
`direction:string`	效果的方向。 `opening` - 打开。 `closing` - 关闭。

过渡类型：光圈抹擦

`gwd-iris-wipe`

过渡效果图库的一种抹擦效果变化形式，在不断扩大的圆圈内显示新图片。

属性

名称	说明
`originpercentx:number`	不断扩大的圆圈在 x 轴上的起点，以占帧宽度的百分比表示（从 0 到 100）。默认值为 50。
`originpercenty:number`	不断扩大的圆圈在 y 轴上的起点，以占帧高度的百分比表示（从 0 到 100）。默认值为 50。

过渡类型：推入

`gwd-push`

过渡效果图库的推入效果类型，新图片滑入视图，同时将旧图片推出视图。

属性

名称	说明
`direction:string`	效果的方向。默认值为从左到右。 `lefttoright` - 从左到右。 `righttoleft` - 从右到左。 `toptobottom` - 从上到下。 `bottomtotop` - 从下到上。

过渡类型：径向抹擦

`gwd-radial-wipe`

过渡效果图库的一种抹擦效果变化形式，通过绕指定点以半径的形式抹擦（像时钟指针一样）来显示新图片。

属性

名称	说明
`direction:string`	效果的方向。默认值为顺时针。 `clockwise` - 顺时针。 `counterclockwise` - 逆时针。
`originpercentx:number`	抹擦半径在 x 轴上的起点，以占帧宽度的百分比表示（从 0 到 100）。默认值为 50。
`originpercenty:number`	抹擦半径在 y 轴上的起点，以占帧高度的百分比表示（从 0 到 100）。默认值为 50。

过渡类型：旋转

`gwd-rotate`

过渡效果图库的旋转效果类型，旧图片一边旋转一边放大，然后在完成旋转的同时向回缩小并显示新图片。

属性

名称	说明
`direction:string`	效果的方向。默认值为顺时针。 `clockwise` - 顺时针。 `counterclockwise` - 逆时针。

过渡类型：切片

`gwd-slice`

过渡效果图库的切片效果类型，新图片以切片或条形逐一滑入视图的形式显示。

属性

名称	说明
`direction:string`	效果的方向。默认值为从左到右。 `lefttoright` - 从左到右。 `righttoleft` - 从右到左。 `toptobottom` - 从上到下。 `bottomtotop` - 从下到上。
`slices:number`	切片的数量（1 至 20）。默认值为 5。
`transparentbackground:boolean`	是否在新图片切入之前显示透明背景。如果为 `false`，则切片会覆盖旧图片。

过渡类型：拆分推入

`gwd-split-push`

过渡效果图库的一种推入效果变化形式，旧图片在垂直或水平方向上拆分为两部分。新图片的相应拆分部分将旧图片的各个部分沿相反的方向推出视图。

属性

名称	说明
`orientation:string`	动画效果的方向。 `horizontal` - 水平。 `vertical` - 垂直。

过渡类型：条纹抹擦

`gwd-stripe-wipe`

过渡效果图库的一种抹擦效果变化形式，交替颜色的纯色条纹会同时在屏幕上扩大以覆盖旧图片。然后，这些条纹会缩小以显示新图片。

属性

名称	说明
`direction:string`	效果的方向。 `lefttoright` - 从左到右。 `righttoleft` - 从右到左。 `toptobottom` - 从上到下。 `bottomtotop` - 从下到上。 `bottomlefttotopright` - 从左下角到右上角。 `toplefttobottomright` - 从左上角到右下角。 `bottomrighttotopleft` - 从右下角到左上角。 `toprighttobottomleft` - 从右上角到左下角。
`stripes:number`	每种颜色的条纹的数量（1 至 10）。默认值为 2。
`color1:string`	两种交替条纹颜色中的一种，以十六进制颜色代码表示。默认值为 #FFFFFF。
`color2:string`	另一种交替条纹颜色，以十六进制颜色代码表示。默认值为 #FFA500。

过渡类型：威尼斯百叶窗

`gwd-venetian-blinds`

过渡效果图库的一种百叶窗效果变化形式，新图片像从威尼斯百叶窗后面露出来一样显示。

属性

名称	说明
`orientation:string`	动画效果的方向。默认值为垂直。 `vertical` - 垂直。 `horizontal` - 水平。
`blinds:number`	帘叶的数量（1 至 20）。默认值为 5。
`staggered:boolean`	窗叶是否逐一过渡。如果为 `false`，则所有窗叶同时过渡。

过渡类型：抹擦

`gwd-wipe`

过渡效果图库的抹擦效果类型，新图片会沿着一条从一边向另一边抹擦的线条逐渐替换旧图片。

属性

名称	说明
`direction:string`	效果的方向。默认值为垂直。 `lefttoright` - 从左到右。 `righttoleft` - 从右到左。 `toptobottom` - 从上到下。 `bottomtotop` - 从下到上。
`angle:number`	抹擦线的角度（以度为单位，范围为 -89 度至 89 度）。默认值为 0。

过渡类型：Z 字形

`gwd-zigzag`

过渡效果图库的 Z 字形效果类型，新图片以蛇形网格图案的形式逐渐显示，以交替方向在连续行或列中显示新图片的图块。

属性

名称	说明
`orientation:string`	效果的方向。 `horizontal` - 水平。 `vertical` - 垂直。
`rows:number`	使用 Z 字形效果的图块的行数（范围从 1 到 20）。默认值为 5。
`columns:number`	使用 Z 字形效果的图块的列数（范围从 1 到 20）。默认值为 5。

事件

名称	说明
`autoplayended`	当自动播放因任何原因结束时发送。如果是因达到预期的循环次数而自然结束，那么 `event.detail.completed` 将为 `true`，否则为 `false`。
`frameactivated`	当开始启动新帧（即使新帧尚未显示）时发送。
`frameshown`	当显示新帧时发送。
`frametap`	当用户点按任意帧时发送。
`rotateonceended`	当轮播因任何原因结束时发送。如果是自然结束，那么 `event.detail.completed` 将为 `true`，否则为 `false`。
`reachleftend`	当图库达到最左端时发送。
`reachrightend`	当图库达到最右端时发送。

方法

名称	说明
`goToFrame(frame:number, with_animation:boolean)`	转到指定帧。
`rotateOnce(startFromCurrentFrame:boolean)`	显示图库中的每个帧，如果 `startFromCurrentFrame` 为 `false` 或未指定，则从开始帧开始显示，否则从当前帧开始。轮播在达到开始帧之前即停止。
`startAutoplay(startFromCurrentFrame:boolean)`	如果 `startFromCurrentFrame` 为 `false` 或未指定，则从开始帧开始自动播放图库，否则从当前帧开始。自动播放在达到循环次数时即停止。
`stop()`	取消任何正在播放的动画。
`goForwards()`	将图库向前移动一帧。
`goBackwards()`	将图库向后移动一帧。

视频

`gwd-video`

一种组件，用于封装 HTMLVideoElement。

属性

名称	说明
`autoplay:boolean`	视频加载完毕后是否自动播放。
`loop:boolean`	视频播放完毕后是否循环播放。
`muted:boolean`	视频在开始播放时是否静音。
`controls:boolean`	是否启用默认的原生播放器控件。
`sources:file`	一系列不同格式的视频，各视频间以英文逗号分隔。
`poster:string`	指示海报帧在用户开始播放或跳转之前一直显示的网址。

事件

名称	说明
`play`	当媒体在暂停后又开始播放时发送，也就是在之前的暂停事件后又恢复播放时发送。
`pause`	暂停播放时发送。
`playing`	当媒体开始播放（无论是首次播放、暂停后又开始播放，还是结束后又重新开始播放）时发送。
`ended`	播放完毕时发送。
`volumechange`	当音量发生变化（包括设置音量和更改静音属性）时发送。
`seeked`	跳转操作完成时发送。
`waiting`	当因为有其他操作（如跳转）尚未完成而导致请求的操作（如播放）被延迟时发送。

方法

名称	说明
`mute()`	在将视频静音/取消静音之间切换。
`pause()`	暂停视频。
`play()`	播放视频。
`replay()`	重放视频。
`seek(time:number)`	跳至视频中的指定时间。
`setVolume(volume:number)`	设置视频音量。
`setSources(sources:string)`	设置视频来源。

示例

让视频在每次播放时都取消静音

要让视频在每次播放时都取消静音，请仿照以下示例创建一个事件：

目标 - 选择要控制的视频。如果您只有 1 个视频，则默认 ID 为 gwd-video_1
事件 - 依次选择视频 > 暂停后播放
操作 - 依次选择自定义 > 添加自定义操作

在“自定义代码”对话框中，为您的函数命名。在此示例中，您可以指定一个诸如 mutebtn 之类的名称。然后，粘贴以下代码：

if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}

YouTube

`gwd-youtube`

用于扩展 HTMLElement 以封装 YouTube API 调用。

属性

名称	说明
`video-url:string`	视频的 YouTube 网址。
`autoplay:string`	在受支持的环境下，YouTube 视频将在加载时自动播放。
`preview-duration:number`	设置预览的时长。仅在自动播放属性设为 `preview` 时使用。
`controls:string`	显示视频控件（`none`、`autohide`）。
`color:string`	播放器进度条的颜色主题（红色或白色）。
`muted:boolean`	视频在开始播放时是否静音。
`annotations:boolean`	显示视频的注释。
`related:boolean`	视频播放完毕后显示相关视频。
`loop:boolean`	视频播放完毕后是否循环播放。
`pause-on-end:boolean`	剩余 1 秒时暂停视频。
`start-position:number`	在指定时间（秒）启动视频。
`allowfullscreen:boolean`	允许在桌面设备上全屏显示。
`extra-player-args:string`	https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters 中所述的其他 YouTube 播放器参数。

事件

名称	说明
`buffering`	YouTube 播放器正在缓冲。
`ended`	YouTube 视频已播放完毕。
`paused`	YouTube 视频已暂停。
`playing`	YouTube 视频开始播放。
`replayed`	YouTube 视频已重放。
`viewed0percent`	视频播放了 0% 时发送。
`viewed25percent`	视频播放了 25% 时发送。
`viewed50percent`	视频播放了 50% 时发送。
`viewed75percent`	视频播放了 75% 时发送。
`viewed100percent`	视频播放了 100% 时发送。
`previewed0percent`	预览开始播放时发送。
`previewed25percent`	预览播放了 25% 时发送。
`previewed50percent`	预览播放了 50% 时发送。
`previewed75percent`	预览播放了 75% 时发送。
`previewed100percent`	预览播放了 100% 时发送。

方法

名称	说明
`toggleMute()`	在将视频静音/取消静音之间切换。
`pause()`	暂停视频。
`play()`	播放视频。
`replay()`	重放视频。
`seek(time:number)`	跳至视频中的指定时间。
`setYouTubeId(id:string, opt_cueOnly:boolean)`	将 YouTube 视频的来源更改为指定 ID。

该内容对您有帮助吗？

您有什么改进建议？