如何使用JS配合CSS如何实现Windows Phone中的磁贴效果

互联网
再看那柔弱的柳树吧，在寒冬余威尚盛时节，就早早苏醒过来，望着冰冻的河面，迎着凛冽的寒风，它微微察觉出一丝春意，于是，不顾一切地率先吐翠，淡淡地披起娇黄嫩绿的新装。沿河望去，枝梢间烟纱雾彀，一片生机，这情景仿佛一首动人的歌，一首热烈向往春天的歌，一首报告春的信息的歌，一首表达美好信念的歌。我在想：既然迎春花被人称作报春花，那么，柳树可不可以叫作报春树呢春来了，万千柳枝在春风中袅袅舞动。柳树是热爱春天的，春天也是热爱柳树的。

Windows Phone的tile设计的美丽对我来说有余音绕梁的效果。我从来不知道优雅的方块盒子布局能给我深刻的印象。因此我尝试在web里用CSS和Jquery去实现这种tile设计。我已尝试Tile Flip动画效果，它能展示两种不同的信息一个在tile的前端而另外一个就在后端。

Demo Download

首先我们要为tile创建和下面图片的效果一样的HTML的内容。每个tile包含了两个分别在前后的div。他们都能包含要展示的信息。下面的html代码生成所需的tile布局。

tile设计包含了CSS的类名

CSS Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="tiletile-normal">
  3. <divclass="front">
  4. <imgclass="icon"src="ie.PNG"/>
  5. </div>
  6. <divclass="back">
  7. InternetExplorer
  8. </div>
  9. </div>
  10. <divclass="container-small">
  11. <divclass="tiletile-small">
  12. <divclass="front">1</div>
  13. <divclass="back">Tile1</div>
  14. </div>
  15. <divclass="tiletile-small">
  16. <divclass="front">2</div>
  17. <divclass="back">Tile2</div>
  18. </div>
  19. <divclass="tiletile-small">
  20. <divclass="front">3</div>
  21. <divclass="back">Tile3</div>
  22. </div>
  23. <divclass="tiletile-small">
  24. <divclass="front">4</div>
  25. <divclass="back">Tile4</div>
  26. </div>
  27. </div>
  28. <divclass="tiletile-wide">
  29. <divclass="front">
  30. WindowsPhoneTilesusingCSSandjQuery
  31. </div>
  32. <divclass="back">
  33. Thisisawidetile
  34. </div>
  35. </div>
  36. </div>

CSS关心的是tile的大小和对齐。（请下载源代码来查看）。这里我要对CSS重要部分进行高亮处理，这部分在tile旋转的时候会创建透明师视图。

CSS Code复制内容到剪贴板
  1. .tile{
  2. float:left;
  3. font-family:'Roboto',sans-serif;
  4. font-size:20px;
  5. margin-left:2px;
  6. margin-top:2px;
  8. -moz-perspective:500px;
  9. -webkit-perspective:500px;
  10. -o-perspective:500px;
  11. -ms-perspective:500px;
  12. perspective:500px;
  13. }

下面的JQuery代码关系Tile Flip。这里我为动画使用了 Transit，它是JQuery的一个扩展。它确实是对平滑动画有好处，同时提供大量在我们这种情况下非常需要的易用的技术，这普通易用的技术能让Tile Flip看起来想两块动画。

JavaScript Code复制内容到剪贴板
  1. $(document).ready(function(){
  3. $(".back").hide();
  5. $(".tile").mouseenter(function(){
  6. $(this).children(".front").transit({
  7. "rotateX":"90deg"
  8. },500,"easeInCirc",function(){
  9. varback;
  10. $(this).hide();
  11. back=$(this).siblings(".back");
  12. back.css({
  13. "rotateX":"-90deg"
  14. });
  15. back.show();
  16. back.transit({
  17. "rotateX":"0deg"
  18. },500,"easeOutCirc");
  19. });
  21. });
  23. $(".tile").mouseleave(function(){
  24. $(this).children(".back").transit({
  25. "rotateX":"90deg"
  26. },500,"easeInCirc",function(){
  27. varfront;
  28. $(this).hide();
  29. front=$(this).siblings(".front");
  30. front.css({
  31. "rotateX":"-90deg"
  32. });
  33. front.show();
  34. front.transit({
  35. "rotateX":"0deg"
  36. },500,"easeOutCirc");
  37. });
  38. });
  39. });

一开始，所有的图块都是隐藏的，rotateX是90°，前面的部分是可以看到的，rotateX是0°。所有的图块在鼠标指针进入的时候翻过来，在鼠标指针出来的时候又翻回来。

上面的图解释了在鼠标指针进入时调用的函数这个过程是怎么进行的，鼠标指针出来的时候的工作原理和这个差不多。

这个设计使用的是在最新版本的浏览器才有的CSS 远景属性。我已经测试过它了，发现在火狐20.0和chrome26.0上可以运行。最好是你在chrome里有硬件图像渲染。如果你的浏览器不支持远景属性的话，它在正交直线视图上看起来还是有效的。

本文如何使用JS配合CSS如何实现Windows Phone中的磁贴效果到此结束。在苦也要坚持，在累也要拼搏。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例