Tạo hiệu ứng đèn cho trang web sử dụng JQuery

21/09/2010 | 2 comments | Chuyên mục: Web-Forum.

Chắc rằng các bạn đã có lúc vào một trang web và thấy có một cái khung nhỏ hiển thị đề nghị bạn đăng ký thành viên, phần còn lại của trang web trở nên mờ đi. Và bạn buộc phải đóng cái khung này đi thì mới có thể sử dụng được trang web. Cụ thể là nó như thế này đây:

Với một vài hướng dẫn sau thì các bạn có thể tự mình áp dụng hiệu ứng này cho trang web của mình sử dụng thư viện javascript JQuery. Các bạn lần lượt thực hiện theo các bước sau:

1. Download JQuery về máy mình tại địa chỉ: http://code.jquery.com/jquery-1.4.2.min.js, sau đó trong phần head của trang web, các bạn chèn thêm thẻ sau:

<head>
.....
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
</head>

Mục đích của đoạn này là cho phép trang web của bạn sử dụng được các hàm trong JQuery, lưu ý là ở đây mình giả sử các bạn đặt file jquery-1.4.2.min.js cùng thư mục với trang web, nếu các bạn đặt trong thư mục khác thì phải thay đổi đường dẫn trong thuộc tính src cho đúng.

2. Bước tiếp theo, chúng ta cần phải đặt các thẻ div lên trang web. Phần này tùy thuộc vào mỗi trang mà có bố cục khác nhau, ở đây trang của mình làm ví dụ mẫu thì nội dung sẽ là như thế này:

<body>
    <div id="page">
        <div id="dim" />
        <div id="modal">
        Nội dung phần popup sẽ hiện ra ở đây
        </div>

        <div id="content" >
        Đặt nội dung của trang web ở trong thẻ này
        </div>
    </div>
</body>

Thẻ div với id=”page” là thẻ có nhiệm vụ làm khung cho trang web, thẻ div với id=”dim” có nhiệm vụ hiển thị một bức hình màu tối (để tạo cảm giác là trang web của chúng ta bị mờ đi), thẻ id=”modal” sẽ hiển thị cửa sổ nhỏ được làm nổi bật lên, thẻ id=”content” chính là nơi chúng ta đặt nội dung của trang web.

Điều tiếp theo cần làm là ta phải xác định định dạng cho các thẻ (màu, kích thước, vị trí, … ). Các bạn có thể tạo một file CSS riêng rồi tham chiếu tới hoặc có thể định dạng ngay trong cùng 1 trang. Để cho đơn giản thì mình sẽ định dạng ngay trong trang web mà không tạo file CSS riêng. Để làm điều này, các bạn chèn đoạn CSS sau vào phần< head></head> của trang web. Cụ thể sẽ là

<style>
        #page{
            background-color: Blue;
            margin:auto;
            width: 800px;
            min-height: 600px;
        }
        #dim{
            background-image: url('dim.png');
            display: none;
            top:0;
            left:0;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        #modal{
            display: none;
            width: 200px;
            height: 200px;
            position: fixed;
            left: 40%;
            top: 10%;
            background-color: White;
        }
    </style>
Chúng ta thiết lập cho thẻ page sẽ màu xanh da trời để phân biệt với các phần còn lại của trang web.
Trong thẻ dim, mình thiết lập background-image là một bức hình màu tối để tạo cảnh trang web bị mờ đi. Ngoài ra chúng ta cần lưu ý thuộc tính display được thiết lập là none bởi vì chúng ta không muốn xuất hiện hình mờ này khi trang web được load. Các thành phần khác của thẻ dim có mục đích làm cho khi xuất hiện thì thẻ div sẽ chiếm hết toàn bộ diện tích của trang web.
Trong thẻ modal, chúng ta thiết lập màu nền là trắng để khi xuất hiện sẽ giống như một cửa sổ nổi bật giữa nền đen. Thuộc tính left và top được sử dụng phần trăm (%) chứ không phải pixel vì chúng ta muốn cửa sổ nhỏ xuất hiện luôn tại vị trí gần giữa trang web dù cho trang web có kích thước bao nhiêu đi chăng nữa.
Như vậy là chúng ta vừa thiết lập cơ bản bố cục cho trang web.
3. Phần quan trọng nhất bấy giờ chính là viết các đoạn script để có thể tạo hiệu ứng như yêu cầu. Nhưng trước hết chúng ta phải quyết định nên làm cho hiệu ứng xuất hiện khi nào (khi click vào link, khi rê chuột, khi trang web mới load…). Ở đây mình sẽ chọn hiệu ứng được thực thi khi người dùng click chuột vào nơi bất kỳ trên thẻ page (vùng màu xanh da trời). Nếu các bạn muốn thực hiện dựa trên các hành động khác thì chỉ cần một chút thay đổi nhỏ. Đoạn script của chúng ta sẽ có nội dung như sau:
<script type="text/javascript">
        $(document).ready(function(){
            $("#page").click(function(){
                $("#dim").fadeIn('slow');
                $("#modal").fadeIn('slow');
                
            });
            $("#dim").click(function(){
                $("#modal").fadeOut('slow');
                $("#dim").fadeOut('slow');
                return false;
            });
        });
    </script>

$(document).ready(function(){….}: Đoạn này có nghĩa là sau khi trang web đã load hết tất cả các thành phần (text, hình ảnh, video…) thì thực hiện hàm function(){…}. Chúng ta sẽ đặt các lệnh cần thực hiện vào phía trong của hàm này.

$(“#page”).click(function(){…}): Đoạn này cho phép chúng ta gắn sự kiện click của thẻ page với các hành động được chứa trong hàm function(){…}.

$(“#dim”).fadeIn(‘slow’): Đoạn này có nghĩa là tìm thẻ có id là dim và cho hiệu ứng xuất hiện (fadeIn) với tốc độ chậm, ngoài ra các bạn có thể chính thành fast để thấy sự khác biệt. Sau khi lệnh này được thực hiện thì toàn bộ trang web sẽ bị che bởi thẻ dim và bị mờ đi (bởi hình nền của thẻ dim)

$(“#modal”).fadeIn(‘slow’): Sau khi đã làm mờ trang web thì chúng ta cho hiện cái cửa sổ nhỏ vào với hiệu ứng như của thẻ dim.

$(“#dim”).click(function(){….}: Chúng ta muốn hiệu ứng này sẽ chấm dứt (trang web trở lại bình thường, cửa sổ nhỏ biến mất) khi chúng ta click chuột vào một điểm bất kỳ của vùng trang web bị mờ. Đoạn mã này gắn sự kiện click của thẻ dim với các hành động được chứa trong function(){…}. Và tất nhiên, các hành động này sẽ là làm biến mất hai thẻ dim và modal. Tương tự như làm cho xuất hiện ta có hàm fadeIn thì làm thẻ biến mất có hàm fadeOut

Như vậy là phần tạo hiệu ứng của chúng ta đã xong.   Đây chỉ là các thành phần cơ bản để các bạn có thể phát triển thêm các hiệu ứng đẹp hơn cho trang web của mình. Đặc biệt việc tận dụng JQuery sẽ giảm đáng kể thời gian các bạn phải viết mã javascript và có thể tạo nên những hiệu ứng đẹp. Chúc thành công!

Internet

Bài viết liên quan:

Leave a comment


− 4 = một

Copyright© : 2010 - 2012 thuthuatso.com  43 truy vấn trong 0.288 giây.Register   Log in