아스피린 세상

css 마크업 부분

  <style type="text/css">
    #Banner_Box { position:relative; width:426px; height:113px; background:url(banner_bg_1.gif) no-repeat left top; overflow:hidden; }
    #Banner_Box img { border:none; }
    #Banner_Box ul { position:relative; width:424px; height:90px; overflow:hidden; margin:14px 1px 0px 1px; padding:0px; list-style:none; }
    #Banner_Box ul li { position:absolute; height:90px; left:0px; top:0px; }
      #Banner_Box ul li a { float:left; display:block; height:90px; text-indent:-5000px; }
      #Banner_Box ul li a.line_0_off { background:url(banner_pic_0_off.gif) no-repeat left top; }
      #Banner_Box ul li a.line_0_on { background:url(banner_pic_0_on.gif) no-repeat left top; }
      #Banner_Box ul li a.line_1_off { background:url(banner_pic_1_off.gif) no-repeat left top; }
      #Banner_Box ul li a.line_1_on { background:url(banner_pic_1_on.gif) no-repeat left top; }
      #Banner_Box ul li a.line_2_off { background:url(banner_pic_2_off.gif) no-repeat left top; }
      #Banner_Box ul li a.line_2_on { background:url(banner_pic_2_on.gif) no-repeat left top; }
      #Banner_Box ul li a.line_3_off { background:url(banner_pic_3_off.gif) no-repeat left top; }
      #Banner_Box ul li a.line_3_on { background:url(banner_pic_3_on.gif) no-repeat left top; }
      #Banner_Box ul li a.line_4_off { background:url(banner_pic_4_off.gif) no-repeat left top; }
      #Banner_Box ul li a.line_4_on { background:url(banner_pic_4_on.gif) no-repeat left top; }
      #Banner_Box ul li a.line_5_off { background:url(banner_pic_5_off.gif) no-repeat left top; }
      #Banner_Box ul li a.line_5_on { background:url(banner_pic_5_on.gif) no-repeat left top; }
   
      #Banner_Box ul li.widths { width:54px; }
      #Banner_Box ul li.widths a { width:54px; }
      #Banner_Box ul li.widthb { width:154px; }
      #Banner_Box ul li.widthb a { width:154px; }
  </style>

html 마크업 부분

  <div id="Banner_Box">
    <ul>
      <li><a href="#">살충제</a></li>
      <li><a href="#">방향제</a></li>
      <li><a href="#">목욕제품</a></li>
      <li><a href="#">소비자접착제</a></li>
      <li><a href="#">건축용제품군</a></li>
      <li><a href="#">산업용제품권</a></li>
    </ul>
  </div>

script 마크업 부분

  <script type="text/javascript">
    function BannerOver() {
      this.BannerWrap = document.getElementById(BannerBox);
      this.BannerList = this.BannerWrap.getElementsByTagName("ul")[0].getElementsByTagName("li");
      this.BannerTotal = this.BannerList.length;
      this.BannerLocation = new Array();
      this.BannerTarget = new Array();
      this.BannerTempWidth;

      for ( var i=0; i<this.BannerTotal; i++ ) {
        this.BannerLocation[i] = BannerWidth_S*i;
        this.BannerList.item(i).style.left = this.BannerLocation[i] + "px";

        this.BannerLink = this.BannerList.item(i).getElementsByTagName("a")[0];
        this.BannerLink.Num = i;
        this.BannerLink.onmouseover = function() {
          eval(BannerName+".BannerMove("+this.Num+")");
        }
      }

      this.BannerRandom = Math.floor(Math.random()*this.BannerTotal);
      this.BannerMove(this.BannerRandom);
    }

    BannerOver.prototype.BannerMove = function(val) {
      this.BannerTargetSetting(val);
      this.BannerLiMove(val);
    }

    BannerOver.prototype.BannerTargetSetting = function(val) {
      for ( var i=0; i<this.BannerTotal; i++ ) {
        this.BannerLiw = this.BannerList.item(i);
        this.BannerImg = this.BannerLiw.getElementsByTagName("a")[0];
        if ( (val+1) == i ) { this.BannerTempWidth = BannerWidth_B } else { this.BannerTempWidth = BannerWidth_S }
        if ( i == 0 ) {
          this.BannerTarget[i] = 0;
        } else {
          this.BannerTarget[i] = this.BannerTarget[i-1] + this.BannerTempWidth;
        }
        if ( val == i ) {
          this.BannerLiw.className = "widthb";
   this.BannerImg.className = "line_" + i + "_on";
        } else {
          this.BannerLiw.className = "widths";
          this.BannerImg.className = "line_" + i + "_off";
        }
      }
    }

    BannerOver.prototype.BannerLiMove = function(val) {
      for ( var i=0; i<this.BannerTotal; i++ ) {
        this.BannerLocation[i] += (this.BannerTarget[i] - this.BannerLocation[i]) * 0.2;
        if ( Math.abs((this.BannerTarget[i] - this.BannerLocation[i])) < 2  ) {
          this.BannerTarget[i] = this.BannerTarget[i];
          this.BannerList.item(i).style.left = this.BannerTarget[i] + "px";
        } else {
          this.BannerList.item(i).style.left = parseInt(this.BannerLocation[i],10) + "px";
          setTimeout(BannerName+".BannerLiMove("+val+")",100);
        }
      }
    }

    var BannerName = "BannerScroll";
    var BannerBox = "Banner_Box";
    var BannerWidth_S = 54;
    var BannerWidth_B = 154;
    var BannerScroll = new BannerOver();
  </script>