Wednesday 4 September 2013

Falling images or flowers using jquery

<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']="image1.jpg";
    image_urls['rain2']="image2.jpg";
    image_urls['rain3']="image3.jpg";
    image_urls['rain4']="image4.jpg";
    $(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>
<script>
    $(document).ready(function()
    {
        var a=$('<img>').attr({'src':'image5.jpg','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr

({'href':'http://javause.blogspot.in'}).append(a).appendTo('body')});
</script>



//change image1,2,3,4,5 to your images and see the output