Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

HTML и XHTML, Jquery → Созданием сайт мобильной тематики

Созданием сайт мобильной тематики


Демо: смотреть
Скачать: mobileapp_website.zip [271,12 Kb] (cкачиваний: 226)


Как веб-разработчик, вы должны принести креативности и внимания к деталям вашей разработки. Часто небольшие вещи, оставляют неизгладимое впечатление на посетителей. Будь это привлекательные иллюстрации или уникальные слайд-шоу, как правило, не информация, запоминается сначала. Как говорится встречают по одежке.

Сегодня мы делаем полный JQuery & CSS сайт вымышленного мобильного приложений. Мы будем создавать семантическую разметку и постепенно добавим эффект слайдера. Это позволит пользователю увидеть четыре из самых популярных смартфонов на Mobile App.

Шаг 1 - XHTML

При создании веб-сайтов важно, как вы напишете код. О валидном коде можно почитать в гугле.

mobileapp.html
<div id="page">

    <h1 id="logoh1"><a href="/" id="logo">MobileApp - the most useful mobile app!</a></h1>

    <div id="phoneCarousel">
        <div class="previous arrow"></div>
        <div class="next arrow"></div>

        <div id="stage">
            <img id="iphone" class="default" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" />
            <img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" />
            <img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" />
            <img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" alt="BlackBerry" />
        </div>
    </div>

    <img class="availableAppStore" src="img/available_on_the_appstore.png" width="230" height="80" alt="Available on the Appstore" />

    <div class="text">
        <h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" class="thumb" />A wonderful app</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

    <div class="text">
        <h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" class="thumb" />More awesome facts</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

</div>


Это код слайдера. Он будет выглядеть вот так.
Созданием сайт мобильной тематики


Шаг 2 - CSS
CSS отвечает за преобразование нашей семантической разметки в настоящий сайт.
*{
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#515151;
    background:url('img/bg.png') repeat-x #f6f8f9;
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
}

#logoh1{ margin:40px 0 0;}

#page{
    /* This the main container div */
    width:1000px;
    min-height:700px;
    margin:0 auto;
    background:url('img/bokeh.jpg') no-repeat 0 120px;
    position:relative;
    padding-top:1px;
}

#phoneCarousel{
    /*    This is the carousel section, it
        contains the stage and the arrows */
    height:390px;
    margin:90px auto 120px;
    position:relative;
    width:800px;
}


#phoneCarousel .arrow{
    /* The two arrows */
    width:44px;
    height:44px;
    background:url('img/arrows.png') no-repeat;
    position:absolute;
    top:50%;
    margin-top:-22px;
    left:0;
    cursor:pointer;
}

#phoneCarousel .next{
    /* Individual styles for the next icon */
    background-position:right top;
    left:auto;
    right:0;
}

/* Hover styles */

#phoneCarousel .arrow:hover{
    background-position:left bottom;
}

#phoneCarousel .next:hover{
    background-position:right bottom;
}

#logo{
    background:url('img/logo.png') no-repeat;
    height:40px;
    text-indent:-9999px;
    width:210px;
    display:block;
}

#stage{
    /* The stage contains the animated phone images */
    left:50%;
    margin-left:-350px;
    position:absolute;
    width:700px;
    height:100%;
}

#stage img{
    /* Hiding all the images by default */
    display:none;
}

#stage .default{
    /*    This class is applied only to the iphone img by default
        and it is the only one visible if JS is disabled */
    display:block;
    left:50%;
    margin-left:-135px;
    position:absolute;
}

#stage .animationReady{
    /* This class is assigned to the images on load */
    display:block;
    position:absolute;
    top:0;
    left:0;
}

.text{    margin-top:70px;width:700px;}

.text p,
.text h3{
    padding-bottom:15px;
    line-height:1.4;
    text-align:justify;
}

.text h3{    font-size:30px;}
.text p{    font-size:20px;}

.thumb{    float:left;margin-right:40px;}

.availableAppStore{float:right;}


/* The styles below are only necessary for the purposes of Tzine's demo */

h2{
    font-size:22px;
    font-style:italic;
    font-weight:normal;
    position:absolute;
    right:0;
    top:52px;
}

h2 a{
    color:#666666;
}

#thanks{
    color:#aaa;
    font-size:12px;
    text-align:center;
    padding:50px;
}
#thanks a{ color: #888;}

a, a:visited {
    text-decoration:none;
    outline:none;
}

a:hover{    text-decoration:underline;}
a img{    border:none;}


Шаг 3 – jQuery
Далее у нас идет скрипт прокрутки слайдера.

script.js
$(document).ready(function(){

    var deg=0;

    /* Storing all the images into a variable */

    var images    = $('#stage img').removeClass('default').addClass('animationReady');
    var dim        = { width:images.width(),height:images.height()};

    var cnt = images.length;

    /* Finding the centers of the animation container: */
    var centerX = $('#stage').width()/2;
    var centerY = $('#stage').height()/2 - dim.height/2;

    function rotate(step,total){
        // This function will loop through all the phone images, and rotate them
        // with "step" degrees (10 in this implementation) till total > 0

        /* Increment the degrees: */
        deg+=step;

        var eSin,eCos,newWidth,newHeight,q;

        /* Loop through all the images: */
        for(var i=0;i<cnt;i++){

            /* Calculate the sine and cosine for the i-th image */

            q = ((360/cnt)*i+deg)*Math.PI/180;
            eSin        = Math.sin(q);
            eCos        = Math.cos(q);

            /*
            /    With the sine value, we can calculate the vertical movement,
            /    and the cosine will give us the horizontal movement.
            */

            q = (0.6+eSin*0.4);
            newWidth    = q*dim.width;
            newHeight    = q*dim.height;

            /*
            /    We are using the calculated sine value (which is in the range
            /    of -1 to 1) to calculate the opacity and z-index. The
            /    frontmost image has a sine value of 1, while the backmost
            /    one has a sine value of -1.
            */

            // eq() extracts the image at the i-th position:

            images.eq(i).css({
                top            : centerY+15*eSin,
                left        : centerX+200*eCos,
                opacity        : 0.8+eSin*0.2,
                marginLeft    : -newWidth/2,
                zIndex        : Math.round(80+eSin*20)
            }).width(newWidth).height(newHeight);
        }

        total-=Math.abs(step);
        if(total<=0) return false;

        // Setting the function to be run again in 40 milliseconds (equals to 25 frames per second):
        setTimeout(function(){rotate(step,total)},40);

    }

    // Running the animation once at load time (and moving the iPhone into view):
    rotate(10,360/cnt);

    $('#phoneCarousel .previous').click(function(){
        // 360/cnt lets us distribute the phones evenly in a circle
        rotate(-10,360/cnt);
    });

    $('#phoneCarousel .next').click(function(){
        rotate(10,360/cnt);
    });
});


Созданием сайт мобильной тематики


Демо: смотреть
Скачать: mobileapp_website.zip [271,12 Kb] (cкачиваний: 226)

Опубликовал dimas_ua, 3-04-2011, 00:00 Комментариев: 0
 (голосов: 5)