Đầu tiên, bạn chuẩn bị nguyên liệu:


Top Left


Link ảnh: https://lh6.googleusercontent.com/-NNYQ0zebUhA/VJ-Dccf13yI/AAAAAAAAAPo/dHVP7BV79gQ/s2048/top-left-noel.png


Top Right


Link ảnh: https://lh3.googleusercontent.com/-jTZ0jF054dI/VJ-Dc4Wg3EI/AAAAAAAAAPs/O3DNpwnFEjQ/s2048/top-right-noel.png


Các bạn có thể tìm hoặc thiết kế thêm các ảnh khác mà bạn thích nhưng phải tương tự những hình trên :)


Tiếp theo là sao chép code này dán vào web (trong thẻ <body> </body>):


<script type='text/javascript'>
document.write('<img style="position:fixed;z-index:9999;top:0;left:0" src="https://lh6.googleusercontent.com/-NNYQ0zebUhA/VJ-Dccf13yI/AAAAAAAAAPo/dHVP7BV79gQ/s2048/top-left-noel.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://lh3.googleusercontent.com/-jTZ0jF054dI/VJ-Dc4Wg3EI/AAAAAAAAAPs/O3DNpwnFEjQ/s2048/top-right-noel.png"/>');
</script>

Nếu bạn dùng ảnh khác những ảnh trên thì trong đoạn code trên bạn phải tìm và sửa lại link ảnh cho thích hợp nhá :D


Demo: http://ngockhuong.com/wp-content/js/noel.html


Ảnh demo trang mình vào dịp noel:


Code javascript trang tri giang sinhVậy là xong nhá! :)


Ngoài ra, để trang trí website đẹp hơn với hiệu ứng tuyết trắng rơi bạn có thể tham khảo thêm tại bài viết JavaScript tạo hiệu ứng tuyết rơi cho web


 


 



---------------------------------------------
Post by: Lâm Ngọc Khương
Bài viết gốc tại: http://ngockhuong.com/lap-trinh-web/javascript/javascript-trang-tri-anh-noel-o-hai-goc-tren-cua-website.html

0 nhận xét:

Đăng nhận xét