İPUCU

Java Object Oriented Programming temeline dayanan, çok işlevli, step by step işleyen dilin dökümanlarının paylaşım alanı.

Seçenekler

Animated Popup Elements (ing)

16-02-2012 18:11
#1
ZeRooCooL - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
01/2012
Mesajlar:
2.627
Teşekkür (Etti):
213
Teşekkür (Aldı):
304
Konular:
1273
Ticaret:
(0) %


Butonlara tıklamanız ile birlikte hoş bir efekt içerisinde küçük mesaj kutucuklarının açılmasını sağlıyor.


Kod:
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: HunBug | http://www.astral-consultancy.co.uk/ */

var fadeOpacity  = new Array();
var fadeTimer    = new Array();
var fadeInterval = 100;  // milliseconds

function fade(o,d) {
  // o - Object to fade in or out.
  // d - Display, true =  fade in, false = fade out

  var obj = ********.getElementById(o);

  if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block')) {
    if(fadeTimer[o])
      clearInterval(fadeTimer[o]);
    else
      if(d) fadeOpacity[o] = 0;
      else  fadeOpacity[o] = 9;
  
    obj.style.opacity = "."+fadeOpacity[o].toString();
    obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
    
    if(d) {
      obj.style.display = 'block';
      fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
    } else
      fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
  }
}

function fadeAnimation(o,i) {
  // o - o - Object to fade in or out.
  // i - increment, 1 = Fade In

  var obj = ********.getElementById(o);
  fadeOpacity[o] += i;
  obj.style.opacity = "."+fadeOpacity[o].toString();
  obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";

  if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0')) {
    if(fadeOpacity[o]=='0')
      obj.style.display = 'none';
    else {
      obj.style.opacity = "1";
      obj.style.filter  = "alpha(opacity=100)";
    }

    clearInterval(fadeTimer[o]);
    delete(fadeTimer[o]);
    delete(fadeTimer[o]);
    delete(fadeOpacity[o]);
  }  
}
</script>

*********
.demoPopup {
  border: solid 1px #333;
  font-family: Tahoma;
  font-size: 12px;
  display: none;
  position: absolute;
  width: 300px;
  z-index: 60;
}

.demoPopuptitle {
  background: blue;
  color: white;
  font-weight: bold;
  height: 15px;
  padding: 5px;
}

.demoPopupbody {
  background: #ddd;
  padding: 5px;
  text-align: center;
}

#demoPopup1 {
  top: 100px;
  left: 50px;
}

#demoPopup2 {
  top: 100px;
  left: 400px;
}
</style>


<input type="button" value="Show Popup 1" onClick="fade('demoPopup1',true);">
<input type="button" value="Show Popup 2" onClick="fade('demoPopup2',true);">

<div id="demoPopup1" class="demoPopup">
  <div class="demoPopuptitle">Fade Popup 1</div>
  <div class="demoPopupbody">
    <p>Press close to fade out this popup</p>  
    <input type="button" value="Close" onClick="fade('demoPopup1',false);">
  </div>
</div>

 <div id="demoPopup2" class="demoPopup">
  <div class="demoPopuptitle">Fade Popup 2</div>
  <div class="demoPopupbody">
    <p>Press close to fade out this popup</p>  
    <input type="button" value="Close" onClick="fade('demoPopup2',false);">
  </div>
</div>


Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı