当前位置： 邯郸网站建设 > 公司网站制作 > 前端 > CSS

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

2024-01-18 14:05 小编

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

Demo Download 
201571182711748.png (520×271)

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

tile设计包含了CSS的类名

CSS Code复制内容到剪贴板
  1. <div class="container">   
  2.     <div class="tile tile-normal">   
  3.         <div class="front">   
  4.             <img class="icon" src="ie.PNG" />   
  5.         </div>   
  6.        <div class="back">   
  7.             Internet Explorer   
  8.        </div>   
  9.     </div>   
  10.     <div class="container-small">   
  11.         <div class="tile tile-small">   
  12.             <div class="front">1</div>   
  13.             <div class="back">Tile 1</div>   
  14.         </div>   
  15.         <div class="tile tile-small">   
  16.             <div class="front">2</div>   
  17.             <div class="back">Tile 2</div>   
  18.         </div>   
  19.         <div class="tile tile-small">   
  20.             <div class="front">3</div>   
  21.             <div class="back">Tile 3</div>   
  22.         </div>   
  23.         <div class="tile tile-small">   
  24.             <div class="front">4</div>   
  25.             <div class="back">Tile 4</div>   
  26.         </div>   
  27.     </div>   
  28.     <div class="tile tile-wide">   
  29.         <div class="front">   
  30.            Windows Phone Tiles using CSS and jQuery   
  31.         </div>   
  32.         <div class="back">   
  33.            This is a wide tile   
  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;   
  7.         
  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 () {   
  2.         
  3.     $(".back").hide();   
  4.         
  5.     $(".tile").mouseenter(function () {   
  6.         $(this).children(".front").transit( {   
  7.             "rotateX":"90deg"  
  8.         },500,"easeInCirc",function () {   
  9.             var back;   
  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.         });   
  20.             
  21.     });   
  22.         
  23.     $(".tile").mouseleave(function () {   
  24.         $(this).children(".back").transit( {   
  25.             "rotateX" : "90deg"  
  26.         },500,"easeInCirc",function () {   
  27.             var front;   
  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°。所有的图块在鼠标指针进入的时候翻过来，在鼠标指针出来的时候又翻回来。 
201571182755614.png (503×243)

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

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


Tag： 效果
返回首页 下一篇：同时文字字体重叠显示不全解决方法

猜你喜欢

热门话题：

怎么 文案 详细 怎么样 维护 外包 行业 设计方案 最新 模板 html 技巧 服务 手机端 高端 电话 服装 产品 工作 网站关键词

联络方式：

13363039260

微信二维码 内部绝密传真282期
您感兴趣的内容
建设网站费用
公司网站制作
seo优化推广
托管服务
网站案例
网站模板
解决方案
地区
服务项目
建站
优化
维护
新闻资讯
公司动态
建站资讯
常见问题
关于我们
域名注册
虚拟主机
云服务器

加微信咨询

内部绝密传真282期
网站备案号：冀ICP备17016639号 Copyright © 2016-2025 邯郸市煜阳网络科技有限公司 版权所有
地址：河北省邯郸市丛台区赵都华润A座803室 电话：13363039260 QQ群1：522899734 QQ群2：542925463
本页内容由煜阳网络科技有限公司通过网络收集编辑所得，
所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中有涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，
工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。
在线咨询 拨打电话

客服QQ

电话

13363039260

内部绝密传真282期

微信二维码