초보가 초보티 내는 플래쉬 같은 자바 코드~!!!

초보가 초보티 내는 플래쉬 같은 자바 코드~!!! 정보

초보가 초보티 내는 플래쉬 같은 자바 코드~!!!

본문

이전 만들었던 사이트 중간에 직원 사진들 있는 곳의 소스 코드입니다~
외국 어디선가 가져왔는데 출처는 기억은 안나구~ ㅎㅎ;;;;

latest 스킨으로 함 만들어 볼라 했는데 귀찮은데다가 실력이 없어서 기냥 코드만 남깁니다~
플래쉬 작업 귀찮으신 분들 쓰면 좋을 듯~!!!

예제 : http://www.bomtv.co.kr/w3/sub0102.php?sub0102=sub0102

------------------------// 소스//-------------------------

<html>
<head>
<title>직원님들 소개</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
  overflow: hidden;
}
body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  background: #fff;
  width: 100%;
  height: 100%;
}
#center {
  position: absolute;
  left: 50%;
  top: 50%;
}
#slider {
  position: absolute;
  width: 600px; /* 넓이*/
  height: 333px;
  left: -300px;
  top: -186px;
  overflow: hidden;
  background: #fff;
  border: 20px solid #fff;
}
#slider .slide {
  position: absolute;
  top: 0px;
  height: 333px;
  width: 500px;
  background: #000;
  overflow: hidden;
  border-left: #000 solid 0px;
  cursor: default;
}
#slider .title   {
  color: #F80;
  font-weight: bold;
  font-size: 1.2em;
  margin-right: 1.5em;
  text-decoration: none;
}
#slider .backgroundText {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  background: #000;
  filter: alpha(opacity=40);
  opacity: 0.4;
}
#slider .text {
  position: absolute;
  top: 1%;
  top: 100%;
  color: #FFF;
  font-family: verdana, arial, Helvetica, sans-serif;
  font-size: 9pt;
  text-align: justify;
  width: 300px;
  left: 10px;
}
#slider .diapo {
  position: absolute;
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: hidden;
}
</style>

<script type="text/javascript">
// ========================================================
//              ===== images slider ====
// script: Gerard Ferrandez - Ge-1-doot - February 2008
// http://www.dhteumeuleu.com
// CC-BY-NC
// ========================================================

/* ==== slider nameSpace ==== */
var slider = function() {
/* ==== private methods ==== */
function getElementsByClass(object, tag, className) {
  var o = object.getElementsByTagName(tag);
  for ( var i = 0, n = o.length, ret = []; i < n; i++) {
   if (o[i].className == className) ret.push(o[i]);
  }
  if (ret.length == 1) ret = ret[0];
  return ret;
}
function setOpacity (obj,o) {
  if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
  else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont, speed, iW, iH, oP) {
  this.slides = [];
  this.over   = false;
  this.S      = this.S0 = speed;
  this.iW     = iW;
  this.iH     = iH;
  this.oP     = oP;
  this.oc     = document.getElementById(oCont);
  this.frm    = getElementsByClass(this.oc, 'div', 'slide');
  this.NF     = this.frm.length;
  this.resize();
  for (var i = 0; i < this.NF; i++) {
   this.slides[i] = new Slide(this, i);
  }
  this.oc.parent = this;
  this.view      = this.slides[0];
  this.Z         = this.mx;
  /* ==== on mouse out event ==== */
  this.oc.onmouseout = function () {
   this.parent.mouseout();
   return false;
  }
}
Slider.prototype = {
  /* ==== animation loop ==== */
  run : function () {
   this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
   this.view.calc();
   var i = this.NF;
   while (i--) this.slides[i].move();
  },
  /* ==== resize ==== */
  resize : function () {
   this.wh = this.oc.clientWidth;
   this.ht = this.oc.clientHeight;
   this.wr = this.wh * this.iW;
   this.r = this.ht / this.wr;
   this.mx = this.wh / this.NF;
   this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
  },
  /* ==== rest ==== */
  mouseout : function () {
   this.over      = false;
   setOpacity(this.view.img, this.oP);
  }
}
/* ==== Slide Constructor ==== */
Slide = function (parent, N) {
  this.parent = parent;
  this.N      = N;
  this.x0     = this.x1 = N * parent.mx;
  this.v      = 0;
  this.loaded = false;
  this.cpt    = 0;
  this.start = new Date();
  this.obj    = parent.frm[N];
  this.txt    = getElementsByClass(this.obj, 'div', 'text');
  this.img    = getElementsByClass(this.obj, 'img', 'diapo');
  this.bkg    = document.createElement('div');
  this.bkg.className = 'backgroundText';
  this.obj.insertBefore(this.bkg, this.txt);
  if (N == 0) this.obj.style.borderLeft = 'none';
  this.obj.style.left = Math.floor(this.x0) + 'px';
  setOpacity(this.img, parent.oP);
  /* ==== mouse events ==== */
  this.obj.parent = this;
  this.obj.onmouseover = function() {
   this.parent.over();
   return false;
  }
}
Slide.prototype = {
  /* ==== target positions ==== */
  calc : function() {
   var that = this.parent;
   // left slides
   for (var i = 0; i <= this.N; i++) {
    that.slides[i].x1 = i * that.Z;
   }
   // right slides
   for (var i = this.N + 1; i < that.NF; i++) {
    that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
   }
  },
  /* ==== HTML animation : move slides ==== */
  move : function() {
   var that = this.parent;
   var s = (this.x1 - this.x0) / that.S;
   /* ==== lateral slide ==== */
   if (this.N && Math.abs(s) > .5) {
    this.obj.style.left = Math.floor(this.x0 += s) + 'px';
   }
   /* ==== vertical text ==== */
   var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
   if (Math.abs(v - this.v) > .5) {
    this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
    this.v = v;
    this.cpt++;
   } else {
    if (!this.pro) {
     /* ==== adjust speed ==== */
     this.pro = true;
     var tps = new Date() - this.start;
     if(this.cpt > 1) {
      that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
     }
    }
   }
   if (!this.loaded) {
    if (this.img.complete) {
     this.img.style.visibility = 'visible';
     this.loaded = true;
    }
   }
  },
  /* ==== light ==== */
  over : function () {
   this.parent.resize();
   this.parent.over = true;
   setOpacity(this.parent.view.img, this.parent.oP);
   this.parent.view = this;
   this.start = new Date();
   this.cpt = 0;
   this.pro = false;
   this.calc();
   setOpacity(this.img, 100);
  }
}
/* ==== public method - script initialization ==== */
return {
  init : function() {
   // create instances of sliders here
   // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
   this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
   setInterval("slider.s1.run();", 16);
  }
}
}();

</script>
</head>

<body>
<div id="center">
<div id="slider">
  <div class="slide">
   
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/1.gif" alt="">
   <div class="text">
      <span class="title">관리부</span>
      웃는 얼굴을 보여드릴 순 없지만 항상 웃는 모습으로 최고의 서비스를 보여드리겠습니다. 문의사항이 있으실 경우, 언제든지 편하게 말씀해 주세요.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/2.gif" alt="">
   <div class="text">
    <span class="title">경영진</span>
      BOMTV 의 모든 경영진은 경영뿐만 아니라 실무에도 많은 도움과 조언으로 BOMTV 의 모든 임직원에게 모범이 되고 있으며, 무엇보다 고객님들께 최상의 영상과 서비스를 제공해 드리고자 밤낮없이 열심히 노력하고 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/3.gif" alt="">
   <div class="text">
      <span class="title">오프라인 영상디자인팀</span>
      오프라인 영상의 스토리부터 제작까지 모든 것을 담당하고 있습니다. 웨딩홀/스튜디오 등에서 최고로 통하는 영상 제작으로 인정받고 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/4.gif" alt="">
   <div class="text">
    <span class="title">온라인 영상디자인팀</span>
                온라인 고객님들의 영상 제작과 디자인을 담당하고 있는 온라인 영상 디자인팀은 업계에서 최고라 자부할 수 있을만큼 뛰어난 실력을 갖춘 인력들로 구성되어 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/5.gif" alt="">
   <div class="text">
      <span class="title">온라인 영상디자인팀</span>
      온라인 고객님들의 영상 제작과 디자인을 담당하고 있는 온라인 영상 디자인팀은 업계에서 최고라 자부할 수 있을만큼 뛰어난 실력을 갖춘 인력들로 구성되어 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/6.gif" alt="">
   <div class="text">
      <span class="title">온라인 영상디자인팀</span>
      온라인 고객님들의 영상 제작과 디자인을 담당하고 있는 온라인 영상 디자인팀은 업계에서 최고라 자부할 수 있을만큼 뛰어난 실력을 갖춘 인력들로 구성되어 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/7.gif" alt="">
   <div class="text">
      <span class="title">영업팀</span>
                  BOMTV 의 기업고객과 협력업체에 항상 최상의 서비스를 제공하기 위해 노력하고 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/8.gif" alt="">
   <div class="text">
      <span class="title">온라인 영상디자인팀</span>
      온라인 고객님들의 영상 제작과 디자인을 담당하고 있는 온라인 영상 디자인팀은 업계에서 최고라 자부할 수 있을만큼 뛰어난 실력을 갖춘 인력들로 구성되어 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/9.gif" alt="">
   <div class="text">
      <span class="title">온라인 영상디자인팀</span>
      온라인 고객님들의 영상 제작과 디자인을 담당하고 있는 온라인 영상 디자인팀은 업계에서 최고라 자부할 수 있을만큼 뛰어난 실력을 갖춘 인력들로 구성되어 있습니다.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="http://www.bomtv.co.kr/w3/img/bomtv/10.gif" alt="">
   <div class="text">
      <a class="title" href="웹디자인팀 http://www.dhteumeuleu.com">웹디자인팀</a>
       BOMTV 웹사이트 관리 및 제작을 담당하고 있으며, 자체 웹사이트 개발로 항상 고객님들이 원하는 모습으로 더 편하게, 더 쉽게 웹사이트를 개발하는데 주력하고 있습니다.
   </div>
  </div>
  
</div>
</div>