Windows Phone的tile設(shè)計(jì)的美麗對(duì)我來(lái)說(shuō)有余音繞梁的效果。我從來(lái)不知道優(yōu)雅的方塊盒子布局能給我深刻的印象。因此我嘗試在web里用CSS和Jquery去實(shí)現(xiàn)這種tile設(shè)計(jì)。我已嘗試Tile Flip動(dòng)畫(huà)效果，它能展示兩種不同的信息一個(gè)在tile的前端而另外一個(gè)就在后端。

首先我們要為tile創(chuàng)建和下面圖片的效果一樣的HTML的內(nèi)容。每個(gè)tile包含了兩個(gè)分別在前后的div。他們都能包含要展示的信息。下面的html代碼生成所需的tile布局。

tile設(shè)計(jì)包含了CSS的類(lèi)名

CSS Code復(fù)制內(nèi)容到剪貼板

Internet?Explorer

1Tile?12Tile?23Tile?34Tile?4

Windows?Phone?Tiles?using?CSS?and?jQuery

This?is?a?wide?tile

CSS關(guān)心的是tile的大小和對(duì)齊。(請(qǐng)下載源代碼來(lái)查看)。這里我要對(duì)CSS重要部分進(jìn)行高亮處理，這部分在tile旋轉(zhuǎn)的時(shí)候會(huì)創(chuàng)建透明師視圖。

CSS Code復(fù)制內(nèi)容到剪貼板

.tile?{

float:left;

font-family:'Roboto',sans-serif;

font-size:20px;

margin-left:2px;

margin-top:2px;

-moz-perspective:500px;

-webkit-perspective:500px;

-o-perspective:500px;

-ms-perspective:500px;

perspective:500px;

}

下面的JQuery代碼關(guān)系Tile Flip。這里我為動(dòng)畫(huà)使用了 Transit，它是JQuery的一個(gè)擴(kuò)展。它確實(shí)是對(duì)平滑動(dòng)畫(huà)有好處，同時(shí)提供大量在我們這種情況下非常需要的易用的技術(shù)，這普通易用的技術(shù)能讓Tile Flip看起來(lái)想兩塊動(dòng)畫(huà)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

$(document).ready(function()?{

$(".back").hide();

$(".tile").mouseenter(function()?{

$(this).children(".front").transit(?{

"rotateX":"90deg"

},500,"easeInCirc",function()?{

varback;

$(this).hide();

back?=?$(this).siblings(".back");

back.css({

"rotateX":"-90deg"

});

back.show();

back.transit(?{

"rotateX":"0deg"

},500,"easeOutCirc");

});

});

$(".tile").mouseleave(function()?{

$(this).children(".back").transit(?{

"rotateX":"90deg"

},500,"easeInCirc",function()?{

varfront;

$(this).hide();

front?=?$(this).siblings(".front");

front.css({

"rotateX":"-90deg"

});

front.show();

front.transit({

"rotateX":"0deg"

},500,"easeOutCirc");

});

});

});

一開(kāi)始，所有的圖塊都是隱藏的，rotateX是90°，前面的部分是可以看到的，rotateX是0°。所有的圖塊在鼠標(biāo)指針進(jìn)入的時(shí)候翻過(guò)來(lái)，在鼠標(biāo)指針出來(lái)的時(shí)候又翻回來(lái)。

上面的圖解釋了在鼠標(biāo)指針進(jìn)入時(shí)調(diào)用的函數(shù)這個(gè)過(guò)程是怎么進(jìn)行的，鼠標(biāo)指針出來(lái)的時(shí)候的工作原理和這個(gè)差不多。

這個(gè)設(shè)計(jì)使用的是在最新版本的瀏覽器才有的CSS 遠(yuǎn)景屬性。我已經(jīng)測(cè)試過(guò)它了，發(fā)現(xiàn)在火狐20.0和chrome26.0上可以運(yùn)行。最好是你在chrome里有硬件圖像渲染。如果你的瀏覽器不支持遠(yuǎn)景屬性的話(huà)，它在正交直線視圖上看起來(lái)還是有效的。

總結(jié)

以上是生活随笔為你收集整理的html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。