Hiệu ứng Lá Mùa Thu Rơi Tuyệt đẹp Cho Blogger - Iris Tips

Có thể bạn quan tâm

Iris Tips

Đóng Menu
Trang chủ
Thủ thuật
- Blogger
- Máy tính
- Điện thoại
- Facebook
- Internet
- Bảo mật
- Kiếm tiền
- SEO
Thiết kế web
- CSS
- HTML
- JavaScript
- jQuery
Giao diện
- Tin tức, Tạp chí
- Phim, Video
- Manga, Anime
- Giao diện khác
Series
- Blogger Shortcode
- Chia sẻ bài viết tự động
- Hiệu ứng hình ảnh
- Bản quyền
- Markup Tags
- Giáng sinh
- Đón Tết
Cafe
- Cafe
- Quà tặng
- Trò chơi
Công cụ
- HTML
- Mã màu
- CSS
- Công cụ khác
Liên hệ
- Liên hệ
Chế độ ban đêm

Iris Tips

Chia sẻ về Thủ thuật Blogger, Template, Internet và SEO

Hot Post

Iris Tips Blogger Tips CSS jQuery Hiệu ứng Lá Mùa Thu Rơi tuyệt đẹp cho Blogger Iris Tips 8/30/2015 A+ a- Chia sẻ Facebook Blog This! Chia sẻ Email Bình luận 6 Iris Tips

Beautiful Leaf Falling Effect For Blogger

Thu sang trong nắng hanh vàng Gió lay mơn trớn nhẹ nhàng lá rơi Mây thu ửng sắc lưng trời Hồ thu soi nắng sáng ngời thủy tinh.. Thế là một mùa thu nữa lại đến. Một sắc thu đầy lãng mạn với là vàng rơi, tiếng chim gọi bầy... Hòa cùng không khí của mùa thu, hôm nay hãy cùng Iris Tips mang chút không khí của mùa thu vào Blogger của bạn bằng đoạn jQuery dưới đây.

DEMO

Cách thực hiện

1Vào Bố cục >> Thêm tiện ích HTML/Javascript và đán vào đoạn code dưới đây <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFUYTZdCqSmTLAxXgx5c451vb4ih_1-fdXoj63IbkdOke2ttvW3HcYLALCTbYIDaweU9E3i9Ghk9a8uNaCtUuIuyi_drSjHGJpW3j7CFhb_yx4nChu6_y64RkLu0_taNZW7KOW_C-7dNXv/s1600/Leaf1.png";image_urls['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPZnUo1kxrGkx29BUg5hZQQwvX72A3zpKj00EAQdStsfdeI3jGgNU-PkwFT-L2pXSh-e4kAypm7TkqdIFVlyZc_in5238V3gVnmRyHajDNAgyW26UZGz1sT_sKkEQrjUtQ17m_G4ritnQ/s1600/Leaf2.png";image_urls['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMq6W2zVESmEoqd10LGmhwniFtGIj5J9hrN6bBdh_tEk3HkZ9IHIn82eIirPZiqZHvTBWvUF8Fy9h5TPsXNLfEjcIU8jHfOOHkQX70L3T44Iu_EkUJdyvOdte-_PGUCHT_TKBJdjy5h0Df/s1600/Leaf6.png";image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBidhSQJvlqH1j22O0-zCBcp7fA09uVKtoZk7oPDPDNKC7zK8Exg-fzO_Zt1-wU6VWEmGwINptD4lQ_Eu2f3nBLNYY3FzPoSf2OtwE-K6GmWVzqUVh3nldwaFDebJ2TQywOk-wujFMUTdu/s1600/Leaf5.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script> Chỉnh sửa: Bạn cũng có thể thêm lá rơi cho thủ thuật trên bằng cách thêm vào sau image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBidhSQJvlqH1j22O0-zCBcp7fA09uVKtoZk7oPDPDNKC7zK8Exg-fzO_Zt1-wU6VWEmGwINptD4lQ_Eu2f3nBLNYY3FzPoSf2OtwE-K6GmWVzqUVh3nldwaFDebJ2TQywOk-wujFMUTdu/s1600/Leaf5.png"; đoạn code image_urls['rain5']="5th-image-url.png"; Và sửa image_urls['rain'+e(1,4)] thành image_urls['rain'+e(1,5)] Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé. Chúc bạn thành công! Created by itc/Iris Tips DMCA.com Protection Status

Twitter
Facebook
Google+
LinkedIn
Pinterest

Iris Tips

6 Comments

Unknown12/06/2015 5:03 CH
Bạn ơi, mình muốn làm cánh hoa đào rơi như thế này này, nhưng khi mình đổi link hình của bạn bằng link gif của mình tuy thành công, trông rất đẹp mắt nhưng lại không được như nàyCứ phải đợi hoa bay hết mới kick vào link trên bài được Bạn giúp mình được không? Cảm ơn bạn nhiều lắm :3Đây là link hình mình đổi với link của bạn này: http://3.bp.blogspot.com/-wP6ofyyn8Jw/URzd1snOBvI/AAAAAAAAA94/E4b_OwWnaPk/s1600/Namkna-blogspot-com_4.gif
Trả lờiXóaTrả lời
1. Iris Tips12/06/2015 9:57 CH
  Hình của bạn quá lớn rồi... Chỉ cần duy nhất hình chiếc là hoặc cánh hoa thôi bạn, ví dụ như vậy nèhttp://3.bp.blogspot.com/-Te-t2fE8zBY/UFmgIXY063I/AAAAAAAAEYc/P5OT_IQhqPQ/s1600/Leaf5.pngVà cũng không bắt buộc là hình gif đâu. Ở thủ thuật trên bạn có thể thêm 4 hình ảnh khác nhau.Mình cũng có viết một thủ thuật tương tự nhưng chỉ dùng 1 hình duy nhất thôi, bạn có thể xem thêm ở link bên dướihttp://iris-tips.blogspot.com/2015/11/script-con-mua-tinh-yeu-nhan-ngay-le-tinh-nhan-valentine.html
  XóaTrả lời
2. Unknown12/07/2015 3:53 CH
  Hi~ mình hiểu rồi, cảm ơn bạn nhiều nhé :3
  XóaTrả lời
3. Iris Tips12/07/2015 7:18 CH
  ;-D /-lv
  XóaTrả lời
Hồng Long8/04/2017 10:56 SA
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaTrả lời
admin12/08/2021 10:19 SA
j,j
Trả lờiXóaTrả lời

Thêm nhận xétTải thêm...

Conversion Clean

Đăng nhập bằng Google

Cùng tham gia bình luận bài viết này nhé!

Đăng ký: Đăng Nhận xét (Atom)

Cửa hàng
- Dịch vụ
- Cài đặt Template
- Sửa lỗi website
- Tùy biến website
- Premium Pack
- Sản phẩm
- Twitter Template
- Liên Quân One
- BSW Pro
- BSW V3
- Code Block IP
- JS Block Country

Nổi bật trong tuần

Sửa lỗi Red Alert 2 ***FATAL*** String manager failed to initialized properly
Exmanga Template Truyện tranh, Anime chuyên nghiệp cho Blogger
Khắc phục lỗi game Red Alert 2 (Ra 2) bị lag, không hiển thị menu trên Windows
Hướng dẫn chơi game Red Alert 2 online
Tạo Banner quảng cáo phong cách Ribbon 2 trong 1 độc đáo cho website của bạn

Bạn có biết ?

Biểu mẫu liên hệ

Tên Email * Thông báo * Có gì mới trên Iris Tips?

Nơi cập nhật những thay đổi và tính năng mới

Phiếu khảo sát

Dành một chút thời gian tham gia khảo sát nhé

Premium Services

Bạn gặp khó khăn trong việc sử dụng Blogger? Hãy để chúng tôi giúp bạn.

Quà tặng

Những phần quà nhỏ dành tặng độc giả của Iris Tips

1Cập nhật giao diện mới. Bổ sung hiệu ứng đổ bóng đồng nhất giữa các thành phần.

2Chính thức ra mắt Iris Tips Online Store - chuyên cung cấp những sản phẩm và dịch vụ chuyên nghiệp đến từ Iris Tips và các đối tác.

3Thêm Chế độ ban đêm. Kích hoạt trong Side Menu ở cạnh bên website.

4Thêm Reading Mode. Kích hoạt trong bài viết.

5Thêm những badge đầy màu sắc tạo điểm nhấn cho thanh menu.

6Chức năng mới: Trang Đăng nhập bằng tài khoản Google tại khung bình luận.

7Tối ưu giao diện và sửa một số lỗi nhỏ khác.

Đóng

- Bạn vui lòng truy cập vào Trang khảo sát để tham gia nhé.

Đóng

Từ khóa » Hiệu ứng Lá Rơi Cho Web

Hiệu ứng Lá Mùa Thu Rơi Tuyệt đẹp Cho Blogger - Iris Tips

Iris Tips

Beautiful Leaf Falling Effect For Blogger