Skip to content

Hướng dẫn tạo hiệu ứng jQuery Sliding

June 7, 2013

Hiệu ứng jQuery là một cách hữu ích để làm website của bạn thêm nổi bật. Hôm nay, mình sẽ hướng dẫn các bạn làm một hiệu ứng jQuery Sliding. Hiệu ứng này rất hữu ích cho ai muốn làm một portfolio online.

Để chuẩn bị cho bài hướng dẫn này, các bạn chuẩn bị 1 vài tấm ảnh kích thước 300x200px.

Cấu trúc HTML

1
2
3
4
        <div id=”top”>
            <img src=”/images/1.jpg” />
            <img src=”/images/top.jpg” />
        </div>

Chúng ta sẽ làm 6 hiệu ứng là topbottomleftrightbottom-leftbottom-right tương đương với 6 id trong mã HTML. Và id này sẽ được khai báo trong phần jQuery.

Mã CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    .thumb {
        width:300px;
        margin:0 30px 30px 0;
        overflow:hidden;
        float:left;
        position:relative;
        height:200px;
        background-color:#000;
        cursor:pointer;}
    .thumb p{
        font-size:12px;
        color:#FFFFFF;
        padding:5px;
        text-align:justify;}
    .thumb img {
        display:block; }
    .top {
        position:absolute;
        top:0;
        left:0;}
    .last {
        margin-right:0; }

jQuery

Đưa 2 đoạn script và đặt trong thẻ <head>

1
2
        &lt;script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”&gt;&lt;/script&gt;
        &lt;script src=”/js/sliding.js”&gt;&lt;/script&gt;

Và chúng ta bắt đầu xây dựng file sliding.js

Cấu trúc chung

1
2
3
4
5
        $(‘Khai báo hiệu ứng’).hover(function() {
         $(‘img.top’, $(this)).stop().animate({‘hướng sliding’: ‘kích thước sliding’},’Thời gian sliding’);
        },function() {
        $(‘img.top’, $(this)).stop().animate({’0′: ’0′}, 500);
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
         $(function() {
            $(‘#top’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({top: ’200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
            });
            $(‘#left’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ‘-300px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
            });
            $(‘#bottom-left’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ‘-300px’, top: ’200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
            });
            $(‘#bottom’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({top: ‘-200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
            });
            $(‘#right’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ’300px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
            });
            $(‘#bottom-right’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ’300px’, top: ’200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
            });
        });
Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: