접속자 : 33(회원0)  오늘 449 어제 1,296 최대 13,898 전체 9,038,691  
커뮤니티정보포토 플라자공간 비디오뮤직-카페 자료 공간 관심+즐거움
Tip & TechJava Script그누보드 관련 자료Action ScriptHTML/CSSLINUX TipMySQL TipPHP Tip
   wego21™  LOGIN
  
  
  ID저장  자동로그인
회원가입  아이디/비밀번호 찾기
Tip & Tech
Java Script
그누보드 관련 자료
LINUX Tip
PHP Tip
MySQL Tip
HTML/CSS
Action Script
Java Script 베스트 #10
한장의 이미지를 마우스 움직임에 따라 여러조각으로 분리합니다.
글쓴이: IN-BEST
작성일: 2010-07-16 04:43:21   4613   0


  Script Explanation
사용된 이미지는 딱 1장입니다.
마우스를 움직여보세요..



 
  Script Code

<html>
<head>
    <title>http://www.blueb.co.kr</title>
<STYLE type=text/css>
.span {
    FONT-SIZE: 1px; LEFT: -10000px; OVERFLOW: hidden; POSITION: absolute
}
</STYLE>

<SCRIPT type=text/javascript>
<!--
window.onerror = new Function("return true");
screen.bufferDepth = 16;
object  = new Array();
var nx  = 0;
var ny  = 0;
var Ix  = 0;
var Iy  = 0;
var Ox  = 0;
var Oy  = 0;
///////////////////
var NX  = 7;
var NY  = 5;
///////////////////
var xm  = 0;
var ym  = 0;


function CObj(y,x){

    this.obj = document.createElement("span");
    this.obj.className="span";
    this.img = document.createElement("img");
    this.img.style.position="absolute";
    this.img.src = document.getElementById("doot").src;
    this.obj.appendChild(this.img);
    document.getElementById("G1D").appendChild(this.obj);

    this.x   = x;
    this.y   = y;
    this.L   = 0;
    this.T   = 0;
    this.xr  = (this.x / 2) % 1 ? 1 : -1;
    this.yr  = (this.y / 2) % 1 ? 1 : -1;
    this.xf  = Math.random() * 8 + 1;
    this.yf  = Math.random() * 8 + 1;
    this.GE1 = function (){
        with (this) {
            with(obj.style){
                left   =  L + (-nx / 4 + xm) * (this.xr * this.xf);
                top    =  T + (-ny / 4 + ym) * (this.yr * this.yf);
            }
        }
    }
    
    this.DOOT = function (){
        with(this){
            L  = Math.round(x * Nx);
            T  = Math.round(y * Ny);
            obj.style.width  = Nx + 1;
            obj.style.height = Ny + 1;
            img.style.left   = -L;
            img.style.top    = -T;
        }
    }
}

document.onmousemove = function(e){
    if (window.event) e = window.event;
    xm = (e.x || e.clientX) / 2;
    ym = (e.y || e.clientY) / 2;
    if(Math.abs(2 * xm - nx / 2) < 2 && Math.abs(2 * ym - ny / 2) < 2){
        xm = nx / 4;
        ym = ny / 4;
    } 
}

function resize(){
    nx = document.body.offsetWidth;
    ny = document.body.offsetHeight;
    Ix = document.getElementById("doot").width;
    Iy = document.getElementById("doot").height;
    Nx = Math.round(Ix / NX);
    Ny = Math.round(Iy / NY);
    Ox = (nx - Ix) / 2;
    Oy = (ny - Iy) / 2;
    with(document.getElementById("G1D").style){
        left   = Ox;
        top    = Oy;
        width  = Ix;
        height = Iy;
    }
    for(i in object)object[i].DOOT();
}
onresize = resize;

function run() {
    for(var ice in object)object[ice].GE1();
    setTimeout("run();", 16);
}

onload = function() {
    k = 0;
    for(var i=0;i<NY;i++){
        for(var j=0;j<NX;j++)object[k++] = new CObj(i,j);
    }
    resize();
    xm = nx / 4 - Math.random() * 50;
    ym = ny / 4 - Math.random() * 50;
    run();
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<DIV id=G1D style="POSITION: absolute"></DIV>
<IMG id=doot style="VISIBILITY: hidden" src="http://www.blueb.co.kr/SRC/javascript/image/bmw1.jpg">

</BODY>
</HTML>
출처 : 부루비
인간의 비극은 실존의 오해에 기인한다. 주접 떨지않고, 허허실실 겸손하게 살아간다 ...,

  이름 비밀번호

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정

얼굴표정



홈페이지소개   |   개인정보보호   |   광고   |   배너등록   |   찾아 오시는길

:::::::::::::::::::::: 인-베스트 코리아 | 김인배 | 경기 군포시 산본동 1135, 광림빌딩 706호 | TEL: 031-393-2212 | FAX: 031-393-2219 | E-mail: korea@in-best.com :::::::::::::::::::::: Copyright (C) '2008 wego21.com All rights reserved. Designed by IN-BEST™