使用JS配合CSS實(shí)現(xiàn)Windows Phone中的磁貼效果

1、使用js配合css實(shí)現(xiàn)windows phone中的磁貼效果windows phone的tile設(shè)計(jì)的漂亮對(duì)我來說有余音繞梁的效果。我從來不知道優(yōu)雅的方塊盒子布局能給我深刻的印象。因此我嘗試在web里用css和jquery去實(shí)現(xiàn)這種tile設(shè)計(jì)。我已嘗試tile flip動(dòng)畫效果，它能展示兩種不同的信息一個(gè)在tile的前端而另外一個(gè)就在后端。demo download首先我們要為tile創(chuàng)建和下面的效果一樣的html的內(nèi)容。每個(gè)tile包含了兩個(gè)分離在前后的div。他們都能包含要展示的信息。下面的html代碼生成所需的tile布局。tile設(shè)計(jì)包含了css的類名css code復(fù)制內(nèi)容到剪貼板

2、 internet explorer 1 tile 1 2 tile 2 3 tile 3 4 tile 4 windows phone tiles using css and jquery this is a wide tile css關(guān)懷的是tile的大小和對(duì)齊。（請(qǐng)下載源代碼來查看）。這里我要對(duì)css重要部分舉行高亮處理，這部分在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; ma

3、rgin-top:2px; -moz-perspective:500px; -webkit-perspective:500px; -o-perspective:500px; -ms-perspective:500px; perspective:500px; 下面的jquery代碼關(guān)系tile flip。這里我為動(dòng)畫用法了 transit，它是jquery的一個(gè)擴(kuò)展。它的確是對(duì)平滑動(dòng)畫有益處，同時(shí)提供大量在我們這種狀況下十分需要的易用的技術(shù)，這一般易用的技術(shù)能讓tile flip看起來想兩塊動(dòng)畫。javascript code復(fù)制內(nèi)容到剪貼板 $(document).ready(function

4、 () $(".back").hide(); $(".tile").mouseenter(function () $(this).children(".front").transit( "rotatex":"90deg" ,500,"easeincirc",function () var back; $(this).hide(); back = $(this).siblings(&

5、amp;quot;.back"); back.css( "rotatex" : "-90deg" ); back.show(); back.transit( "rotatex":"0deg" ,500,"easeoutcirc"); ); ); $(".tile").mouseleave(function () $(this).children(&quot

6、;.back").transit( "rotatex" : "90deg" ,500,"easeincirc",function () var front; $(this).hide(); front = $(this).siblings(".front"); front.css( "rotatex" : "-90deg" ); front.show(); front.transit( "rotatex" : "0deg" ,500,"easeoutcirc"); ); ); ); 一開頭，全部的圖塊都是躲藏的，rotatex是90°，前面的部分是可以看到的，rotatex是0°。全部的圖塊在鼠標(biāo)指針進(jìn)入的時(shí)候翻過來，在鼠標(biāo)指針出來的時(shí)候又翻回歸。 上面的圖說明了在鼠標(biāo)指針進(jìn)入時(shí)調(diào)用的函數(shù)這個(gè)過程是怎么舉行的，鼠標(biāo)指針出來的時(shí)候的工作原理和這個(gè)差不多。 這個(gè)設(shè)計(jì)用法的是在最新版本的掃瞄器才有的c