ListView项目动画- Windows商店应用程序
ListView item animations - Windows store app
我使用visual studio和本教程中的基本网格示例创建了简单的网格应用程序。我期望这个动画将在所有项目的工作,但似乎它只在第一个工作。我的问题是,我怎么能在所有项目的动画?如果可以随机动画(不是一次全部!)例如:windows 8的开始菜单)。
项目模板:
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<div class="item">
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<img class="item-image-new" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
</div>
</div>
</div>
Js动画:
var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
// Play the Peek animation
function peekTile(tile1, tile2) {
// Create peek animation
var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
// Reposition tiles to their desired post-animation position
tile1.style.top = "-250px";
tile2.style.top = "0px";
// Execute animation
peekAnimation.execute();
}
function changeImage() {
// Get the two image elements
var images = document.querySelector(".item-image");
var imagesNew = document.querySelector(".item-image-new");
// Swap out the old image source and choose the new image source
images.src = imagesNew.src;
if (images.src == lightGray)
imagesNew.src = mediumGray;
else if (images.src == mediumGray)
imagesNew.src = darkGray;
else
imagesNew.src = lightGray;
// Reset the elements for the pre-animation position and trigger the animation
images.style.top = "0px";
imagesNew.style.top = "250px";
peekTile(images, imagesNew);
};
和interval,它改变图像(它写在ready函数中):
setInterval(function () { changeImage() }, 4000);
当您调用document.querySelector
时,它将只返回第一个匹配的元素,在您的情况下将是第一个列表项。如果你想动画任意随机项目,只需调用document.querySelectorAll(".item")
,从结果列表中选择一个随机项目,然后调用querySelector('.item-image')
,像你现在做的那样进行。
相关文章:
- 如何添加CSS&JavaScript进入Windows窗体应用程序C#.net
- Windows 8 Javascript应用程序XML对象
- 在JavaScript Windows 8应用程序中设置桌面壁纸
- 使用Javascript和html5登录Windows应用程序的Facebook
- Bing语音和Bing地图在Windows 8应用商店应用程序中冲突
- 是否可以使用推送通知Windows 8 Metro应用程序's使用Javascript
- 如何在Windows上用javascript构建本机应用程序
- 在Windows Phone应用程序中激活javaScript
- 无法在Windows 10 Cordova应用程序中从Web视图进行ajax调用
- 在Windows Metro风格的Javascript应用程序中读取文件内容
- 如何使用SAML和C#调试Windows Phone 8.1应用程序的Javascript代码
- 如何在Windows Phone 8.1应用程序中在C#和Javascript之间传递数据或通信
- Windows 8市场应用程序JS,访问远程XML文件
- Windows 8应用程序正在运行,现在得到0x800a1391-JavaScript运行时错误:'WinJS&
- 如何获取运行我的 Web 应用程序的用户的 Windows 登录用户名
- Windows 8 HTML5 JavaScript 应用程序中向左滑动的事件名称是什么
- 捕获在Windows应用程序中启动其他应用程序的用户事件
- C# WebView 不理解 JavaScript 调用 alert()(Windows 8 XAML 应用程序)
- 如何处理数据-Windows 8应用程序
- 传递消息从javascript到应用程序- Windows和Mac OSx - Lazarus