마우스위치에따라 배경이 회전 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 배경관련 > 마우스위치에따라 배경이 회전 상세정보

클라우드태그

Javascript

PHP

ASP

css

html

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

마우스위치에따라 배경이 회전

해피팀

네티즌

소스분류

배경관련

다운로드 횟수

888 회

간단설명

마우스 위치에 따라 오브젝트와 배경이 Y축으로 회전합니다. 마우스를 좌우로 움직여보세요.

평가하기

데모를 확인하시고 아래는 본예제의 스크립트입니다.

<html>
<head>
<title>해피CGI</title>

var o=[];
var xm=0;
var ym=0;
var ay=2;
var sin=Math.sin(ay*Math.PI/180);
var cos=Math.cos(ay*Math.PI/180);
var k=0;
var b1, b2;

function run(){
    // ---- background scrolling
    b1.left=Math.round(k)+"px";
    b2.left=Math.round(k+512)+"px";
    k-=ay*2;
    if(k>0)k-=512;
    if(k<-512)k+=512;
    // ---- rotate elements
    for(var i in o)o[i].rotate();
    setTimeout("run()", 16);
}

document.onmousemove = function(e) {
    if (window.event) e = window.event;
    xm = (e.x || e.clientX);
    // ---- ay angle
    ay=(-xm+document.body.offsetWidth*.5)/100;
    sin=Math.sin(ay*Math.PI/180);
    cos=Math.cos(ay*Math.PI/180);
}

onload = function() {
    img = document.getElementById("images").getElementsByTagName("img");
    scr = document.getElementById("screen");
    b1 = scr.getElementsByTagName("img")[0].style;
    b2 = scr.getElementsByTagName("img")[1].style;

    map = [
        [0, 0, -256, -30], // big mountain
        [4, 0, -172, -30], // house big mountain
        [1, 35, -256, -40], [1, 35, -256, 0], [1, -20, -256, -60], // mountain
        [2, -40, -256, 0], [2, 20, -256, -70], // green talus
        [7, -40, -256, -25], // red tower
        [26, -40, -256, -25, 0, 1], // ground
        [8, -25, -256, -95], // volcano
        [9, 60, -256, -60], [9, 50, -256, 40], [9, -40, -256, 40], // hill
        [10, 80, -256, -70], [10, 80, -256, -40], [10, 60, -256, 60], [10, -60, -256, 50], [10, -60, -256, 20], // small hill
        [27, 80, -256, -70, 0, 1], [27, 60, -256, 60, 0, 1], [27, -60, -256, 50, 0, 1], // green ground
        [11, 50, -256, -20], // grey donjon
        [26, 50, -256, -20, 0, 1], // ground
        [11, 0, -256, 10], // grey donjon
        [25, 0, -256, 10, 0, 1], // castle water
        [12, -12, -256, 10], [12, 12, -256, 10], [12, 0, -256, -2], [12, 0, -256, 22], // grey towers
        [13, 60, -256, 15], // towers with red roof
        [14, 50, -256, -80], // dolmen
        [15, 65, -256, 30], [15, 85, -256, 30], [15, 70, -256, 10], [15, 70, -256, -20], // oranges
        [16, 0, -200, -70], [16, 20, -180, -70], [16, 40, -170, -50], [16, 40, -190, -30], // cloud
        [17, -50, -160, -10], // cloud castle
        [18, -65, -256, -50], [18, -45, -256, -50], [18, -40, -256, -70], [18, -65, -256, -30], [18, -80, -256, -80], [18, -80, -256, -20], [18, -90, -256, 0], // fir
        [19, -60, -256, -40], [19, -90, -256, -40], [19, -100, -256, -20], [19, -90, -256, -60], [19, -40, -256, -80], [19, -60, -256, -60], [19, -60, -256, -90], // small fir
        [3, 60, -256, -40], [3, 60, -256, -30], [3, 60, -256, -90], [3, 70, -256, -90], [3, 50, -256, -95], [3, 90, -256, -40], // flower
        [3, 95, -256, -50], [3, 95, -256, -30], [3, 80, -256, -20], [3, 80, -256, -10], [3, 100, -256, -10], [3, 100, -256, 0], // flower
        [21, 30, -256, 30], [21, 20, -256, 40], [21, 20, -256, 60], [21, -20, -256, 30], [21, -20, -256, 50], [21, -30, -256, 60], [21, -10, -256, 90], // tree
        [22, 30, -256, 45], [22, 35, -256, 60], [22, 45, -256, 70], [22, 50, -256, 90], [22, -20, -256, 90], [22, -15, -256, 70], [22, -10, -256, 35], // small tree
        [5, 0, -256, 30], [5, 0, -256, 40], [5, 0, -256, 50], [5, 0, -256, 60], [5, 0, -256, 70], // plots
        [6, -25, -220, -95, 20], [6, -25, -210, -95, 20], // volcano smoke
        [23, -10, -172, -23], [23, -15, -169, -21], [23, -20, -166, -19], [23, -25, -163, -17], [23, -30, -160, -15], // chain
        [24, 20, -200, 40, 2], // seagull
        [28, 20, -256, 40] // Yoshi
    ];
    for(var k=0;k<map.length;k++)o.push(new CObj(map[k][0],map[k][1],map[k][2],map[k][3],map[k][4],map[k][5]));
    // grass
    for(var i=0;i<20;i++){
        do{r=Math.round(Math.random()*180-90)} while(r<80);
        a=Math.random()*2*Math.PI;
        o.push(new CObj(20, Math.round(r*Math.cos(a)), -256, Math.round(r*Math.sin(a))));
    }
    run();
}