Thứ Năm, 28 tháng 3, 2013
Tạo hiệu ứng mờ dần khi rê chuột vào ảnh bằng JQuery cho Blogspot
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // Độ mờ ban đầu của ảnh trước khi rê chuột (1.0 tức ảnh rỏ nhất, 0 là mờ nhất)
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.3); // Độ mờ của ảnh khi rê chuột vào
},function(){
$(this).fadeTo("slow", 1.0); // Độ mờ của ảnh khi không còn rê chuột vào ảnh
});
});
</script>Ở trên chỉ là tạo hiệu ứng cho các hình ảnh ở trang bài viết của Blogspot, nếu bạn muốn tạo hiệu ứng cho các ảnh thuộc class nào đó thì chỉ việc thay đổi .post thành class ban muốn tạo hiệu ứng là được.
Ngoài việc tạo hiệu ứng làm mờ ảnh như trên thì chúng ta hoàn toàn có thể áp dựng ngược lại hiệu ứng này, tức là ban đầu chúng ta sẽ để hình ảnh dạng mờ và khi rê chuột vào hình ảnh sẽ rỏ hơn vẫn hiệu ứng đẹp mắt đấy. Bạn chỉ cần thay đổi thông số ở bên trên là được. Ví dụ thay 0.3 thành 1.0 và ngược lại 1.0 thành 0.3.
5. Cuối cùng save template lại.
Bạn hoàn toàn có thể tự mình mày mò và tọa thêm hiệu ứng mà mình thấy ưng ý cho hình ảnh trên của mình nhé.
Chúc bạn thành công
!
Tin liên quan
Comments[ 0 ]