웹사이트의 배경의 이미지를 랜덤으로 출력을 한다면 방문하는 사람들도 조금 더 지루하고
새로운 느낌을 줄 수 있는 자료입니다.
스크립트의 이미지 경로와 갯수 적용할 곳(id, class) ,파일확장자 등 설정으로 사용하기가 쉽습니다.
script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
var numberOfImages=4;
var imageNum = Math.round(Math.random()*(numberOfImages-1))+1;
var imgPath=('./images/randombg_'+imageNum+'.png');
$('#mainbgs').css('background-image', ('url("'+imgPath+'")'));
});
</script>
<style type="text/css">
#mainbgs {
height: 500px;
padding: 20px 0 0 20px;
font-family: "맑은 고딕";
font-size: 20pt;
color: #099;
font-weight: bold;
letter-spacing: -1pt;
background-repeat: no-repeat;
background-position: center top;
}
</style>
-------------------------------------------------------------------
<body>에 삽입된 내용
<div id="mainbgs">
배경이미지가 랜덤하게 바뀌는 DIV
</div>
코드의 색상으로 강조된부분을 보시면 이미지갯수, 이미지경로, 이미지확장자, 적용영역, 해당영역에 css로 백그라운드
적용을 확인하실 수 있으며 사이트의 백그라운드에 쓰실려면 적절한 css수정은 필요합니다.
사용자분들의 센스를 밑으며 유용하게 쓰시길 바랍니다~~
|
