12/8/12

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

12/8/12

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/AVvXsEiUVx_wAemekLsUMiM872h2LZEUygJ9ng05l8s1XlX-m2x_a9WGJ8z58s9Wf0PITbfRU8H9yIJn5Dop2Zgl6xAMQ19xCxKxXAP1rt0nKgi6WVFUWed8wZKw6eoBh-KxLv-yAjk21a5EOM7u/s1600/Leaf1.png";image_urls['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7n9me6xWiTr7Suh0gyowNP9pypR3-nzq3U4-yOGRTLh1UlbITqXI9m11edQeI6TmwjXX8FDaruPw78Yt7ODM2ZtkhbxN-qexhl8i_pv_EehQkD1u1g3FuXbwSWMfKEa4qXgxboyNRH69/s1600/Leaf2.png";image_urls['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvVGy22SnayfauK0yvSeaFBvPASym0cStQLZKk2cBcn8Pui_BZ8NVaro1GoHmAgxcsJg31YlrZJl7y3S9eW68K0_6LJFCcxt2NGY_wMcwUBRp6t0-on3WwZf8Aik08C9W1CZuWBF9M0MO/s1600/Leaf6.png";image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3kFwTYm6IUpQ5LlYbc8L3NOUnfBnd1xF4PqtJ8i40N3pIRV2ztyrzZpsbkmIovUmheApRdGCXjF36VQZJb7jNVemLuSnhOZos_FtOlU7aYh-aq4H3Kw-zofuJJMbIAYH9OdLd04mov_Y/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
Tin liên quan
XEM TRÊN MOBILE

No comments:

Post a Comment

300x250