Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Ajax ve Css ile tam ekran(full screen) sayfa arkaplan resmi yapımı
     admin     07.04.2014     13:29:31

Merhaba. Bu yazımızda daha önce CSS ile yaptığımız bir uygulamada olduğu gibi bir fotoğrafın ya da resmin sayfa seminine full screen(tam ekran) yerleştirilmesinin ajax jquery ve css birlikte kullanılarak nasıl yapılacağını anlatacağım. Detaya bakınız.



Öncelikle <head>...</head> etiketleri arasına aşağıdaki jquery kodlarını yerleştiriniz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">

01.$(document).ready(function() {
02.var bgImage = $(’#background-image’);
03.function resizeImg() {
04.var imgwidth = bgImage.width(),
05.imgheight = bgImage.height(),
06.winwidth = $(window).width(),
07.winheight = $(window).height(),
08.widthratio = winwidth / imgwidth,
09.heightratio = winheight / imgheight,
10.widthdiff = heightratio * imgwidth,
11.heightdiff = widthratio * imgheight;
12.if(heightdiff>winheight) {
13.bgImage.css({
14.width: winwidth+’px’,
15.height: heightdiff+’px’
16.});
17.else {
18.bgImage.css({
19.width: widthdiff+’px’,
20.height: winheight+’px’
21.});
22.}
23.$("#background-image").show();
24.}
25.resizeImg();
26.$(window).resize(function() {
27.resizeImg();
28.});

 

29.});

</script>

Yine <head>...</head> etiketleri arasına aşağıdaki css kodlarını yerleştiriniz.

<style type="text/css">

01.
#background-image{
02.position:absolute;
03.top:0;
04.left:0;
05.z-index:-10;
06.overflowhidden;
07.width100%;
08.display:none;
09.}
10..content{
11.font:25px Arial;
12.padding:10px;
13.margin:100px;
14.border:1px solid #FFF;
15.vertical-align:central;
16.background:#FFFFFF;
17.height:500px;
18.text-align:center;
19.font-weight:bold;
20.}
</style>

Son olarak ise <body>...</body> etiketleri arasına aşağıdaki kodları yerleştirerek uygulamayı test ediniz. İyi çalışmalar :)

1.<img src="bg.jpg" id="background-image" alt="">
2.<div class="content">Merhaba Arkadaşlar;</div>

 

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...