Tạo hiệu ứng đèn cho trang web sử dụng JQuery
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ỉ: 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>
<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:
(Đánh giá bài viết)
Loading ...
sao mình làm nó k trong suốt để nhìn thấy được web đằg sau thế hả bạn
bạn có thể hướng dẫn mình thêm 1 chút ở đoạn đó không?
cảm ơn bạn nhiều
Thank author, bài hay đó..
Còn cái m muốn hỏi là cái thấy người ta sữ dụng Modal() nhưng hông làm được.
( www.ericmmartin.com/projects/simplemodal/)
——-
@zenchi: bạn hông có file anh dim.png đó, bạn hãy mở css, chọn cho nó cái background-color tối tối là ok liền.