使用 jQuery 和 CSS 实现 Windows Phone 的瓷砖效果 (Tiles) 已翻译 100%

oschina 投递于 2013/04/14 07:16 (共 3 段, 翻译完成于 04-14)
阅读 1343
收藏 4
1
加载中

Windows Phone's tile design is a haunting beauty to me. I never knew a layout of neat square boxes can impress me that much. And so I tried to implement that tile design in web using CSS and jQuery.  I have tried only the Tile Flip animation which can show two different information one at the front side and another at the back side of the tile.

Demo Download


First we are going to create the html content for the tiles to be created as shown in the below image. Each tile contains twodivs front and back. Both can contain information to be shown. The following html code produces the desired arrangement of tiles.

已有 1 人翻译此段
我来翻译


Tile design along with CSS class names

<div class="container">
    <div class="tile tile-normal">
        <div class="front">
            <img class="icon" src="ie.PNG" />
        </div>
       <div class="back">
            Internet Explorer
       </div>
    </div>
    <div class="container-small">
        <div class="tile tile-small">
            <div class="front">1</div>
            <div class="back">Tile 1</div>
        </div>
        <div class="tile tile-small">
            <div class="front">2</div>
            <div class="back">Tile 2</div>
        </div>
        <div class="tile tile-small">
            <div class="front">3</div>
            <div class="back">Tile 3</div>
        </div>
        <div class="tile tile-small">
            <div class="front">4</div>
            <div class="back">Tile 4</div>
        </div>
    </div>
    <div class="tile tile-wide">
        <div class="front">
           Windows Phone Tiles using CSS and jQuery
        </div>
        <div class="back">
           This is a wide tile
        </div>
    </div>
</div>
The CSS takes care of size and alignment of the tiles. (Please download the source code and check). Here I would like to highlight the important part of CSS which creates the perspective view when the tile rotates.
.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 takes care of the Tile Flip with the following code. Here I have used Transit for animation which is a jQuery extension. It is really great for smooth animations and provides lots of ease techniques which is very much needed in our case as the normal simple ease will make the Tile Flip look like two pieces of animation.
$(document).ready(function () {
    
    $(".back").hide();
    
    $(".tile").mouseenter(function () {
        $(this).children(".front").transit( {
            "rotateX":"90deg"
        },500,"easeInCirc",function () {
            var back;
            $(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 () {
            var front;
            $(this).hide();
            front = $(this).siblings(".front");
            front.css({
                "rotateX" : "-90deg"
            });
            front.show();
            front.transit({
                "rotateX" : "0deg"
            },500,"easeOutCirc");
        });
    });
});
已有 1 人翻译此段
我来翻译
Initially all thebacks of tiles are hidden androtateXis -90 deg .  Andfronts are visible androtateXis 0 deg. All the tiles filp atmouseenterand flip again atmouseleave.

The above diagram explains the working of the function on mouseenter. mouseleave works in similar way.

This design makes use of CSSperspectiveproperty which is implemented only in latest versions of few browsers. I have tested it and found working on Firefox 20.0 and Chrome 26.0. Better you have hardware graphics rendering in for Chrome.  If your browser doesn't supportperspective, still it should work in orthogonal view.


已有 1 人翻译此段
我来翻译
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(2)

Turghun
Turghun
真的不错
buger
buger
很不错。收藏了。
返回顶部
顶部