제이쿼리 예제
랜덤숫자증가
랜덤으로 색깔과 크기가 달라지면서 계속 증가하는 숫자를 띄우는 예제
* parseInt(Math.random()*0xffffff)).toString(16) 랜덤칼라구문
제이쿼리의 좌표
offset그룹 : 부모요소와 자식요소의 위치관계 (일반적으로 알고 있는 좌표개념)
scroll그룹 : overflow 상태에서 보이지 않는 영역의 길이 (스크롤되는 범위를 계산)
<script>
var nCount=0;
var $panel=null;
$(document).ready(function(){
init();
start();
});
function init(){
$panel=$("#panel");
}
function start(){
setInterval(addTag,20);
}
function addTag(){
nCount++;
var color="#"+(parseInt(Math.random()*0xffffff)).toString(16);
var fontSize=(10+parseInt(Math.random()*40));
$("<span></span>").html(nCount).css({color:color,fontSize:fontSize,display:"inline-block"}).appendTo($panel);
window.scrollTo(0,document.body.scrollHeight);
}
</script>
이미지자동변경
이미지가 시간에 따라 자동으로 변경되는 예제
<script>
var nCount=0;
var $img1;
$(document).ready(function(){
init();
start();
});
function init(){
$img1=$("#img1")
}
function start(){
setInterval(onChange,1000);
}
function onChange(){
nCount++;
if(nCount>10){
nCount=1
}
$img1.attr("src","images/img"+nCount+".jpg")
}
</script>