Thành viên
 
 
 
Tạo Single-Page-Slide với jQuery
  Trung bình: 3.3 (Đã có 30 lượt đánh giá)
   28/09/2012 05:16 PM

Single-page là dạng web mà toàn bộ nội dung của nó đặt trong một trang html và dụng hiệu ứng như scroll hoặc slide để di chuyển đến từng phần của trang. Bài viết này tôi sẽ hường dẫn các bạn tạo một single-page-slide với thư viện jQuery 

 Tạo Single-Page-Slide với jQuery

SOURCE

DEMO

Bạn có thể download bộ icon trong bài hướng dẫn này ở đây.

HTML
<body>
    <ul class="navigation">
        <li><a href="#1" class="n1 on"></a></li>
        <li><a href="#2" class="n2"></a></li>
        <li><a href="#3" class="n3"></a></li>
        <li><a href="#4" class="n4"></a></li>
        <li><a href="#5" class="n5"></a></li>
        <li><a href="#6" class="n6"></a></li>
        <li><a href="#7" class="n7"></a></li>
    </ul><!--navigation--><!--thanh menu-->

    <!--nội dung-->

    <section id="page-2" class="page">
        <!--nội dung-->
    </section><!--page 2-->

    <section id="page-3" class="page">
        <!--nội dung-->
    </section><!--page 3-->

    <section id="page-4" class="page">
        <h1>Yellow</h1>
    </section><!--page 4-->

    <section id="page-5" class="page">
        <!--nội dung-->
    </section><!--page 5-->

    <section id="page-6" class="page">
        <!--nội dung-->
    </section><!--page 6-->

    <section id="page-7" class="page">
        <!--nội dung-->
    </section><!--page 7-->

    <script type="text/javascript"><!--...--></script>

</body>

Ở trên ta có thanh menu với class là navigation như là một thanh điều hướng để tạo slide đến các trang. Mỗi trang ta để trong thẻ section với class="page".

Bên trong mỗi thẻ a của .navigation ta đặt thuộc tính href của nó lần lượt là #2, #3, #4 ... tương ứng với nó ở thẻsection ta đặt id lần lượt là page-2, page-3, page-4… Cùng với đó ta cũng đặt thẻ a đầu tiên với class='on'. Việc đặt các giá trị như vậy nhằm mục đích cho việc sử dụng jQuery sau này.

CSS

Tạo giao diện với mã CSS :

body{
    background-color:#ff9600;
    overflow:hidden!important;
}


.navigation{
    position:fixed;
    left:0;
    top:10%;
    z-index:999;
}


.navigation a{
    display:block;
    width:60px;
    height:70px;
    background-image:url(../img/icon.png);
}

.navigation .n1{
    background-color:#ff9600;
    background-position:0 0;
}


.navigation .n2{
    background-color:#06ea00;
    background-position:-60px 0;
}


.navigation .n3{
    background-color:#00a2ff;
    background-position:-120px 0;
}


.navigation .n4{
    background-color:#ffcc00;
    background-position:-180px 0;
}


.navigation .n5{
    background-color:#ff2c99;
    background-position:-240px 0;
}


.navigation .n6{
    background-color:#67638b;
    background-position:-300px 0;
}


.navigation .n7{
    background-color:#f92828;
    background-position:-360px 0;
}


.page{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:-110%;
    z-index:10!important;
    box-shadow:0 0 5px rgba(0,0,0,0.1);
}


.show{
    box-shadow:none;
    z-index:0!important;
}


#page-2{
    background-color:#06ea00;
}


#page-3{
    background-color:#00a2ff;
}


#page-4{
    background-color:#ffcc00;
}


#page-5{
    background-color:#ff2c99;
}


#page-6{
    background-color:#67638b;
}


#page-7{
    background-color:#f92828;
}

Kết quả :

Ở đây ta chú ý đặt giá trị thuộc tính overflow:hidden cho body để cho trang web không bị tràn. Cùng với đó đặtright:-110% và z-index:10 cho .page, tạo thêm lớp .show với z-index:0 .

jQuery

Nhúng link của jQuery và jQuery Easing vào phần head .

<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"><script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
</head>

Tạo page slide

(function(){
// đặt mỗi thẻ a trong .navigation bằng biến selector
selector = $('.navigation').find('a');
//slide page khi click vào mỗi thẻ a bằng cách thi hành hàm slide với tham số $(this) chính là thẻ a mà ta click
selector.click(function(){
    slide($(this));
})
//tạo hàm slide với tham số a
slide = function(a){
      /* code */
}
//tạo hàm liver để thêm thêm hàm slide khi click và thẻ a với event .bind()
liver = function(){
    selector.bind({
        click:function(){ slide($(this)); }
    })
}
})(jQuery);

Sau đây là phần quan trọng nhất bài viết này. Viết code bên trong hàm slide để tạo slide-page.

slide = function(a){
//kiểm tra xem thẻ a có lớp on không
if(!a.hasClass('on')){
    /* viết tiếp code */
};
}

Đầu tiên ta kiểm tra xem thẻ a này có lớp on hay không nếu không có thì mới cho thi hành hàm tiếp. Nếu thẻ a này không có lớp on thì tiếp tục với code:

//xóa lớp on của thẻ a mà có lớp này trước đó
$('.on').removeClass('on');
//thêm lớp on cho thẻ a click vào
a.addClass('on');
//xóa toàn bộ event của tất cả thẻ a
selector.unbind();
//lấy phần chữ số của giá trị bên trong thuộc tính href đặt bằng biến n
n = a.attr('href').split('#')[1];
//đặt biến page bằng thẻ section có id là page-n
page = $('#page-'+n);
//nếu thẻ a có lớp n1 thì thi hành code A còn không thi hành code B
if(a.hasClass('n1')){
    /* code A */
}else{
    /* code B */
}

Ta xóa toàn bộ event của thẻ a bằng .unbind(). Mục đích để cho page được slide hết thì mới gọi hàm liver ở trên để trả lại event cho thẻ a. Giúp tránh việc khi ta click nhanh từ thẻ a này vào thẻ a khác mà page chưa slide hết sẽ gây lỗi trang.

Còn với lệnh điều kiện if-else ở dưới giúp ta thi hành đoạn 2 code mà ở đây tôi tạm gọi code A và code B. Ta có thẻ a có mỗi lớp là n1,n2,n3… thì thẻ a có lớp n1 tương ứng với trang chính( ở đây là body ) còn các thẻ còn lại tương ứng với trang #page-2,#page-3… Nếu a có lớp n1 ta sẽ thi hành đoạn code A có tác dụng slide page về vị trí right:-110% còn ngược lại thì thi hành code B slide page về vị trí right:0 .

Code A :

//xem có lớp .show hay không
if($('.show').length != 0){
    $('.show').removeClass('show').animate({right:'-110%'},500,'easeInBack',function(){
        liver(); // trả lai event click cho thẻ a
    });
}

Code B :

//slide page-n về vị trí right:0 với hiệu ứng easeOutBack
page.animate({right:0},500,'easeOutBack',function(){
    if($('.page').hasClass('show')){
        $('.show').removeClass('show').animate({right:'-110%'},0,function(){
            page.addClass('show');
            liver(); //trả lại event click cho thẻ a
        });
    }else{
        page.addClass('show');
        liver(); //trả lại event click cho thẻ a
    }
});

 

Ví dụ đơn giản như sau: đầu tiên khi trang load xong, giả sử ta click vào thẻ a có class="n2" thì #page-2 sẽ slide đến, khi đó #page-2 này sẽ được thêm lớp show. Sau đó sẽ có 2 khả năng.( tương đương trường hợp elsedòng 9 của đoạn code B)

  • khả năng thứ nhất khi ta click vào thẻ a có class='n1' thì #page-2 sẽ slide về vị trị right:-110% sau đó sẽ xóa lớp show của #page-2 này.( tương đương với đoạn code A)

  • Khả năng thứ 2 khi ta click vào thẻ a có lớp n3,n4…giả sử ở đây là n3 thì #page-3 sẽ slide đến, sau đó #page-2 sẽ slide về vị trí right:-110% cùng với đó sẽ xóa lớp show của #page-2 rồi thêm lớp show cho #page-3.( tương đương với trường if dòng 4 của đoạn code B )

Chú ý : Giá trị z-index:0 của lớp show có tác dụng khi #page-3 slide đến thì nó sẽ nằm trên #page-2. Gọi hàm liver() khi sau cùng để trả lại event cho thẻ a

Thêm hiệu ứng hover bằng đoạn code sau :

//hiện page khi rê chuột vào thẻ a
selector.mouseenter(function(){
    show($(this));
})
//ẩn page khi rời chuột khỏi thẻ a
selector.mouseleave(function(){
    hide($(this));
})
//hàm show giúp hiện page
show = function(a){
    if(!a.hasClass('on') && !a.hasClass('n1') ){
        n = a.attr('href').split('#')[1];
        page = $('#page-'+n);
        page.stop().animate({right:'-97%'},300,'easeOutBack');
    }else if(!a.hasClass('on') && a.hasClass('n1') && $('.show').length != 0){
        $('.show').stop().animate({right:'-60px'},300,'easeOutBack');
    }
}
//hàm hide giúp ẩn page
hide = function(a){
    if(!a.hasClass('on') && !a.hasClass('n1') ){
        n = a.attr('href').split('#')[1];
        page = $('#page-'+n);
        page.stop().animate({right:'-110%'},300,'easeOutBack');
    }else if(!a.hasClass('on') && a.hasClass('n1') && $('.show').length != 0){
        $('.show').stop().animate({right:'0'},300,'easeOutBack');
    }
}

Sau đó thêm event mouseenter và mouseleave cho hàm liver():

liver = function(){
    selector.bind({
        click:function(){slide($(this))},
        mouseenter:function(){show($(this))},
        mouseleave:function(){hide($(this))}
    })
}

 


Gửi bởi: vanquoc
Lượt xem: 19592

Tuixach360.com
NHẬN XÉT CỦA BẠN
Trung bình: 3.3   
Kiểu gõ: Off Telex VNI VIQR Tổng hợp (Telex, Vni, Viqr)
Họ Tên:
Hòm thư:
Nội Dung:
Số ký tự còn lại: 3500