www.webdeveloper.com
Results 1 to 3 of 3

Thread: Random Pictures Popping out

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Location
    Okinawa Japan
    Posts
    3

    Random Pictures Popping out

    I am not really good with JavaScript, and I am trying to make a site for my friend's business. I am making like a comic book website for him, he draws. He would like to have like characters from his story pop out randomly for 30 seconds but just the picture's popping out the side and randomly change. So like you on the site and from the middle right it just opens up for 30 seconds, closes and 2 minutes later a different picture of a different character comes out. This might be already done for a site but I can not find anything like this and I certainly am not creative enough to think how to do it.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <script type="text/javascript">
    <!--
    // Cartoon PopUp (22-Febuary-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcCartoonPopUp={
    
     init:function(o){
      var ld=o.ImageLoad,ary=o.ImageArray,a,z0=0;
      for (;z0<ary.length;z0++){
       a=[document.createElement('IMG'),new Image(),0,0];
       a[1].src=ary[z0][0];
       a[0].style.position='absolute';
       a[0].style.visibility='visible';
       a[0].style.borderWidth='0px';
       ary[z0][1]?a[0].title=ary[z0][1]:null;
       ary[z0]=a.concat(ary[z0]);
      }
      this.load(o,ary,new Date(),(typeof(ld)=='number'?ld:5)*1000);
     },
    
     load:function(o,ary,d,ms){
      clearTimeout(o.to);
      for (var oop=this,w,h,z0=0,z1=0;z0<ary.length;z0++){
       if ((ary[z0][1]&&ary[z0][1].width<40)&&new Date()-d<ms){
        o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
        return;
       }
      }
      for (;z1<ary.length;z1++){
       if (ary[z1][1]&&ary[z1][1].width<40){
        o.obj.removeChild(ary[z1][0]);
        ary.splice(z1--,1);
       }
       else {
        ary[z1][0].src=ary[z1][1].src;
        w=ary[z1][1].width;
        h=ary[z1][1].height;
        ary[z1][2]=[h/2,w/2,h/2,w/2];
        ary[z1][3]=[0,w,h,0];
       }
      }
      if (ary[0]){
       oop.ready(o,ary);
      }
     },
    
     ready:function(o,ary){
      var ms=o.Animate,ms=typeof(ms)=='number'&&ms>20?ms:1000,show=o.ShowEvery,show=(typeof(show)=='number'&&show>ms/1000*2?show:ms*1000*4)*1000,hide=o.HideAfter,hide=(typeof(hide)=='number'&&hide>ms/1000*2?hide:ms*1000*4)*1000,msk=document.createElement('DIV'),a=document.createElement('A'),mk,z0=0;
      msk.style.position='fixed';
      msk.style.visibility='hidden';
      msk.style.zIndex='202';
      mk=msk.cloneNode(false);
      mk.style.bottom='0px';
      mk.style.width='0px';
      mk.style.right='0px';
      mk.style.height='0px';
      document.body.appendChild(mk);
      msk.style.left='0px';
      msk.style.top='0px';
      msk.style.width='100%';
      msk.style.height=mk.offsetTop+'px';
      document.body.appendChild(msk);
      msk.appendChild(a);
      o=this;
      o.msk=msk;
      o.mk=mk;
      o.a=a;
      o.ary=ary;
      o.lgth=ary.length;
      o.ms=ms;
      o.show=show/2;
      o.hide=hide/2;
      o.to=setTimeout(function(){ o.pop(); },o.show*2);
     },
    
    
     pop:function(){
      var o=this,nu=Math.floor(Math.random()*o.lgth);
      o.msk.style.height=o.mk.offsetTop+'px';
      o.ary[nu][0].style.left=Math.random()*(o.msk.offsetWidth-o.ary[nu][3][1])+'px';
      o.ary[nu][0].style.top=Math.random()*(o.msk.offsetHeight-o.ary[nu][3][2])+'px';
      o.a.removeAttribute('href');
      o.ary[nu][6]?o.a.href=o.ary[nu][6]:null;
      o.a.appendChild(o.ary[nu][0]);
      o.animate(o,o.ary[nu],o.ary[nu][2],o.ary[nu][3],new Date(),o.ms,true);
     },
    
     animate:function(o,ary,f,t,srt,mS,nxt){
      clearTimeout(ary[1]);
      var oop=this,ms=new Date().getTime()-srt,nu,n=[],z0=0;
      for (;z0<4;z0++){
       nu=(t[z0]-f[z0])/mS*ms+f[z0];
       if (isFinite(nu)){
        n[z0]=Math.max(nu,0);
       }
      }
      ary[0].style.clip='rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)';
      if (ms<mS){
       ary[1]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,nxt); },10);
      }
      else {
       ary[0].style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
       oop.to=nxt===true?setTimeout(function(){ oop.animate(o,ary,t,f,new Date(),o.ms,false); },o.hide+(Math.random()*o.hide)):setTimeout(function(){  oop.pop(); },o.show+(Math.random()*o.show));
       nxt===false?oop.a.removeChild(ary[0]):null;
      }
     }
    
    
    
    }
    
      zxcCartoonPopUp.init({
       ImageArray:[            //(optional) anarry.arrays defining the image src, title and link href. (number, default = Animate*4)
        // field 0 = image src.
        // field 1 = image title.
        // field 1 = image link href.
        ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif','Cartoon 1'],
        ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif','Cartoon 2','http://www.vicsjavascripts.org.uk/'],
        ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif','Cartoon 3'],
        ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif','Cartoon 4']
       ],
       ImageLoad:5,             //(optional) the time allowed to load all images in seconds.           (number, default = 5 seconds)
       Animate:1000,            //(optional) the animation duration in milli seconds.                  (number, default = 1000 milli seconds)
       ShowEvery:5,             //(optional) the show period in seconds.                               (number, default = Animate*4)
       HideAfter:5              //(optional) the show period in seconds.                               (number, default = Animate*4)
      })
    //-->
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2013
    Location
    Okinawa Japan
    Posts
    3
    This is almost what I want I, I was just thinking this might be what he wants. I wanted like a picture to slide on and then go back like in a picture frame, but this is much cooler

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles