Thêm hiệu ứng lá rơi sử dụng Javascript cho blog

Một phiên bản nữa của hiệu ứng lá rơi nhìn tự nhiên hơn nhiều và hiệu ứng này được tạo ra bằng cách sử dụng hình ảnh và jQuery


Demo

Làm cách nào để thêm hiệu ứng vào blog?

Bước 1: Click vào button phía dưới
Bước 2: Mở ra một cửa sổ mới bạn click vào
Bước 3: Dán vào form Nội Dung đoạn code bên dưới
<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/AVvXsEiN1AvJccpsImekgCvlTQXGF_N0UJybMiMHPqyFipWiFI20QFOofYP9igahfZjVBgPCbM2kwnMpIWaMkYcqU9Ezfh0haLioypWWXsjjooa9540L2AyElHTz1Tr-IYNjBRyUaQjxF2stD9vT/s1600/Leaf1.png";image_urls['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5RMrz9vo6NY07cPIs2m0FEaCjVt-VCnaYb-uNAuQd82-52fxuQGl54ZO5h5vInLk9_w0nMOSD0VGRXvGsrGKOLPvedJhK9usE_MsCF6n-9SOA7aAqW5v4iOJLQqdrxKmpjeKP3DSB_l_c/s1600/Leaf2.png";image_urls['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXfBRiyJhb4kE7NF9iBZjpnv69rycRfnkHI6llBUYsqmiqweUUt6KqMeHQWMc2Lxy94Zpom3yvCl4EyUzcfQnfXG7A_OIc4aZEzPfHbwN2ZM86pkqRJvE5xr4733xTzHIT9d73xEvLpTrv/s1600/Leaf6.png";image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJTP8jcdLt2N3Ot3vzfsJOVxMwYbuwxVsRjH6D2MSCTnACwGtYh_pzxnFJdLGBbIrhOL8U860GlvWwhI6urkoShQH1UZvCffc3cxqOsiNlOaoFFu9X8d3DWsIz4IVy4nkBrqD7bPn_7hG/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>
  • Thay đổi hình ảnh theo sở thích của bạn và cho phù hợp với blog 
Bước 4: Thêm tiện ích là hoàn thành
0 Comments
Comments

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->