KiMoGiGi 技术文集

不在乎选择什么,而在乎坚持多久……

IT博客 首页 联系 聚合 管理
  185 Posts :: 14 Stories :: 48 Comments :: 0 Trackbacks

-----------------Js
// JavaScript Document
function SlideBox(container, frequency, direction) {
 if (typeof(container) == 'string') {
  container = document.getElementById(container);
 }
 this.container = container;
 this.frequency = frequency;
 this.direction = direction;
 this.films = [];
 var divs = this.container.getElementsByTagName('div');
 for (var i = 0; i < divs.length; i++) {
  if (divs[i].className == 'slideFilm') {
   divs[i].onmouseover = function(self)
    {
     return function()
      {
       self._mouseover()
      };
    }(this);
   divs[i].onmouseout = function(self){return function(){self._mouseout()};}(this);
   this.films[this.films.length] = divs[i];
  }
 }
 this._playTimeoutId = null;
 this._slideTimeoutId = null;
 this._slidable = true;
 var isIE5 = navigator.userAgent.toLowerCase().indexOf("msie 5")>0;
 if (!isIE5)
  this._loop();
}

SlideBox.prototype = {
 _loop : function() {
  var sb = this;
  this._playTimeoutId = setTimeout(function(){sb._slide()}, this.frequency);
 },

 _slide : function() {
  var sb = this;
  var _slide = function() {
   if (!sb._slidable) return;
   var c = sb.container;
   if (sb.direction == 'top') {
    if (c.scrollTop < c.offsetHeight-2) {
     c.scrollTop += 2;
    } else {
     clearInterval(sb._slideTimeoutId);
     sb._loop();
     var ul = c.getElementsByTagName('ul')[0];
     ul.appendChild(c.getElementsByTagName('li')[0]);
     c.scrollTop = 0;
    }
   } else if (sb.direction == 'left') {
    if (c.scrollLeft < c.offsetWidth-2) {
     c.scrollLeft += 2;
    } else {
     clearInterval(sb._slideTimeoutId);
     sb._loop();
     var ul = c.getElementsByTagName('ul')[0];
     ul.appendChild(c.getElementsByTagName('li')[0]);
     c.scrollLeft = 0;
    }
   }
  }
  this._slideTimeoutId = setInterval(_slide, 10);
 },

 _mouseover : function() {
  this._slidable = false;
 },

 _mouseout : function() {
  this._slidable = true;
 }
}


-------------------------------HTML Example
<html>
 <head>
  <title>Untitled</title>
  <style>
  /* AD top */
#ADList{
 float:left;
 width:380px;
 height:191px;
}
#ADList ul{
 margin:0;
 padding:0;
 list-style-type:none;
}
#ADListRoll{
 height:25px;
 width:380px;
 /*background:url(http://pics.taobao.com/bao/album/chl/fp/home_roll_bg.gif) left top no-repeat;*/
 line-height:25px;
 padding:0 5px;
 color:#69F;
}
#ADListRoll a{
 color:#565656;
}
#ADListText,#ADListImg{
 margin-top:6px;
}
#ADListText ul {
 margin-left:10px;
}
#ADListText ul li{
 float:left;
 line-height:16px;
 line-height:20px;
 padding:0;
 margin:0;
 width:170px;
 display:block;
 padding-left:12px;
 /*background:transparent url(http://pics.taobao.com/bao/album/sys/misc/top_icon.gif) 3px 7px no-repeat;*/
}
#ADListImg li{
 float:left;
 width:76px;
 text-align:center;
}
#ADListImg li img{
 border:1px #ccc solid;
 margin-bottom:5px;
 display:block;
}
#ADListRollContainer{height:25px;line-height:25px;overflow:hidden;float:left; }

#ADListRollContainer ul { list-style: none; margin:0px; padding:0;  cursor:pointer;}

#ADListRollContainer li { display: block;}

#ADListRollContainer li div { height:25px; line-height:25px; margin:0 0 0 5px; padding:0;}
  </style>
 </head>
 <body>
  <div id="ADList">
   <div id="ADListRoll">
    <div id="ADListRollContainer">
     <ul>
      <li>
       <div class="slideFilm">1.<a href="http://search1.taobao.com/browse/1801/t-false---------2048------g,giydambrhizdamrvhe5tembqgeydumrqgi2toozsgaydamb2giydamzuhmzdaobwgy5dgmrtguzdwmrqha4daortgi2tmni--g,hmzdambqge5ndw5sx652jqhnhmzdambrga5ndw6lvi5tembqgaydurltorswktdbovsgk4rp2hc4vk6axt36yozsga4dmnr2ztmmr456vo52vt5vyhidwmrqha4daowquhi7s--g,ojsxgzlsozsv64dsnfrwkwztguwdcmbqgaydambqgboq---g,2hnq-------2-------b-y-40-list-coefp-0-all-1801.htm"
         target="_blank">雅诗兰黛ANR眼霜小样50元起</a>
       </div>
      </li>
      <li>
       <div class="slideFilm">2.<a href="http://search1.taobao.com/browse/15-1512/t-g,hm5twoz3hm5twoz3-----g,g4ztsmbmmq4deobmiuztkobmg4ztombmjm3tsmddfq3demztfrhdomzmky4tembmie3dmobmg42taqzmiq4taobmgmzdkmbmo44dgmbmmm4dkobmieytembqfrndglclgi--or-2048----2--------y-40-list-coefp-0-all-1512.htm1512.htm"
         target="_blank">淘宝人气拍照手机促销(行货)</a></div>
      </li>
      <li>
       <div class="slideFilm">3.<a href="http://list.taobao.com/browse/99-50001031/t-false--------yes---------------------2-------b-y-40-list-coefp-0-all-50001031.htm"
         target="_blank">迎新年游戏货币打折出售</a></div>
      </li>
     </ul>
    </div>
   </div>
  </div>
  <script type="text/javascript" src="slidebox.js"></script>
  <script type="text/javascript">
  new SlideBox('ADListRollContainer', 2000, 'top');
  </script>
 </body>
</html>

posted on 2007-01-18 22:20 KiMoGiGi 阅读(595) 评论(0)  编辑 收藏 引用 所属分类: JavaScript
只有注册用户登录后才能发表评论。