Karanlik7 Karanlik7
Merhaba Ziyaretçi Blog Siteme Hoşgeldin ; Bugün

Karanlik7 | Gecenin Karanlığı Hissettirir Yalnızlığı - Karanlıklar ülkesinden karanlık yazılar.. ..

cek birak

J-Query ile Hareketli Çek-Bırak Kodu*  

Çek-Bırak kodunu ilk olarak e-burhan.com'da görmüştüm. Bende sizlere üç adımda kısaca anlatmak isterim.

Adım 1:

-İlk önce bir icerik alanı (div) oluşturuyoruz. Bunu isterseniz oluşturmayabilirsniz.
Ve içerisine rozetin alan kodunı (div) yerleştiriyorsnuz.
<div id="icerik">
  <div id="rozet">v2</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident...


 
</div>



Adım 2:

Daha sonra sitemizin <head> </head> tagları arasına (css tasarım da 'tasarım üzerindeki yazı' yerine eklenebilir.) altta vericeğim kodu ekleyeceğiz.

<style type="text/css">
  div#icerik {
  position: relative;
  margin: 0 auto;
  width: 450px;
  padding: 5px 10px;
  border: 5px solid #444;
  background-color: #7f8183;
  color: #fff;
  font: normal 12px/18px "Trebuchet MS";
  }
   
  div#rozet {
  position: absolute;
  width: 77px;
  height: 77px;
  top: -40px;         / burasını rozetin nerede olmasını isterseniz 
  left: -40px;         / ona göre değer verin. 
  text-indent: -9999px;
  background: url(https://img.webme.com/pic/k/karanlik7/rozet1.png) 0 0 no-repeat;
  /* IE 6 için saydamlık probleminin çözümü */
  _background: transparent;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://img.webme.com/pic/k/karanlik7/rozet1.png', sizingMethod='scale');
  }
  </style>

Adım 3:

üstte verdiğim kodun altına altta vereceğim kodları da ekleyerek kod tamamlanmış oluyor.

<script type="text/javascript" src="http://karanlik7.ka.funpic.de/k7/jquery.js"></script>
<script type="text/javascript" src="http://karanlik7.ka.funpic.de/k7/jquery.easydrag.js"></script>
<script type="text/javascript" src="http://karanlik7.ka.funpic.de/k7/jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#rozet").easydrag();
 
$("div#rozet").ondrop(function(){
$('div#rozet').animate(
{ top:'-40px', left:'-40px'}, / üstteki yeri degistirirseniz burayıda degistirmelisiniz.
{duration: 1000, easing: 'easeOutElastic'}
);
});
});
</script>


Kodları bütün halde alttadır. 




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::16.01.2012, 20:07 (UTC)
madoneyapim
madoneyapim
Kapalı

Saol Çok İşime Yaradı



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Bugüne Kadar 65426 ziyaretçi (170731 klik) karanlik7'ye uğradı!

Yorumlar Sözler...

karanlik7.tr.gg
Kategoriler
Üye Girişi
Kullanıcı Adı
:
Şifre
:
Şifremi Unuttum?
Sponsor Reklamlar
ANKARA'da 5 Günlük Hava Tahmini
Sponsor
Tavsiye Bağlantılar
  • Link bolumu

  • Anket
    Sitemizi nasıl buldunuz?
     
    Son Yorumlar
    Ana Sayfa
    Yukarı Çık

    Copyright © 2014 | XHTML | CSS | design by k7


    => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=