Css3 JS Php ile Arka Planı Rastgele Değiştirmek

Adsız
arka plan resmini rastgele değiştirmek php js ve css3

Web sitenizin arka planını değiştirmek ister misiniz? Css3, Javascript, JQuery ve Php ile arka planı rastgele değiştirmek için birkaç varyasyon çalışacağız. Hadi başlayalım!

İlk olarak html tabanında basit bir arka plan betiği ile başlayalım. Buna göre kodlarımızı çeşitlendirelim.


html {   
    background: url(image/ornekresim.jpg) no-repeat center center fixed
    -webkit-background-size: cover
    -moz-background-size: cover
    -o-background-size: cover
    background-size: cover   
}
Php siteniz için ilk arka plan değişimi için hazırladığımız kod betiği şöyle.

<?php
  $bg = array('krm-01.jpg', 'krm-02.jpg', 'krm-03.jpg', 'krm-04.jpg', 'krm-05.jpg', 'krm-06.jpg', 'krm-07.jpg' ); // içerik dosyaları

  $i = rand(0, count($bg)-1); // içerik tabanından fonksiyonel dosya seç
  $selectedBg = "$krm[$i]"; // seçilecek içerik dosya tabanı
?>

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
JQuery kütüphanesi için ilk arka plan değiştirme kod betiğimiz de şöyle...

var images = ['foto1.jpg', 'foto2.jpg', 'foto3.jpg', 'foto4.jpg', 'foto5.jpg'];
$('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Php siteniz varsa ve daha kısa bir kod olsun isterseniz, aşağıdaki kod işinizi görecektir. Üstelik dosya kaynağında isimlerini belirtmeniz yeterlidir.

background: url('<?php $a = array('resim1.jpg','foto2.gif','arkaplan3.png'); echo $a[array_rand($a)];?>');
Eğer sadece js örneğine ihtiyaç duyarsanız, aşağıdaki sitenizde arka planı rastgele değiştirme js kodunu uygulayabilirsiniz

<html>
<head>
<script type="text/javascript"> 
var totalCount = 8;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// arka plan tekrarla
}
</script>
</head>
<body> 
// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>
Web sitenizde JQuery kütüphanesi kullanıyorsanız, aşağıdaki kod ile basit bir şekilde blog sitenizin arka planını rastgele değiştirebilirsiniz.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    var bgArray = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

    $('body').css('background', bg);

    // dosya kaynağına sahipseniz
    var path = 'images/bg/';

    // 'bg' hedef kaynağını gösterebilirsiniz
    $('body').css('background', path+bg);

}); 
</script>  
"Css3 JS Php ile Arka Planı Rastgele Değiştirmek" yazısını paylaşmak ister misin? ツ
Dilerseniz "web sitesiwordpress" kategori bağlantısını, yer imlerinize ekleyerek, site içi hiyerarşisinde zaman harcamadan güncel konulara ulaşabilir yada sosyal medya hesabınızda imleyebilirsiniz.

Başka neler var?

El Sanatları