庇护祝福的分享

Be worthy

Javascript插件开发

用一个样例来讲述javascript插件的开发过程,虽然工作中更多的使用JQuery,但是原生js基础仍然很重要。 功能说明:一幅长长的画卷,按照一定的速度,或垂直,或水平循环滚动,在指定位置暂停X秒,鼠标进入停止,可以用按钮控制。 可以控制的属性: direction: 方向水平or垂直 stop_time: 暂停时间 hover_control: 鼠标进入是否停止 stop_position: 暂停位置(px) id:滚动体的id container:滚动体容器的id

var scroll={
  container:"content",
  id: "box",
  dirction:"marginTop",
  stop_time:3000,
  hover_control:"on",
  stop_position:[330, 660]
}
var scroll_module = (function(){
  var container = document.getElementById(scroll.container);
  var scroll_part = document.getElementById(scroll.id);
  var divheight= scroll_part.offsetHeight
  var part2 = scroll_part.cloneNode(true);
  container.appendChild(part2);
  var martop = parseInt(scroll_part.style.marginTop || 0 )
  var hoverover = false;
  var go = function(){
    martop = martop - 2;
    scroll_part.style.marginTop = martop + "px";
    timer = setTimeout(go , 5);
    for (var i=0,j=i+1;i<scroll.stop_position.length+1;i++){
      if (martop <=-divheight){
        martop = 0;
        clearTimeout(timer);
        setTimeout(function(){
          go()
        },scroll.stop_time)
      }
      else if (martop== -scroll.stop_position[i]){
        clearTimeout(timer);
        if(hoverover == false){
          setTimeout(function(){
            go()
          },scroll.stop_time)
        }
      }
    }
  }
  var hoveron = function(){
    scroll_part.onmouseover=function(){
      hoverover = true;
      alert(hoverover)
    }
    scroll_part.onmouseout=function(){
      go();
      hoverover = false;
      alert(hoverover)
    }
  }
   return {
     go : go,
     hoveron : hoveron
    }
})()
  scroll_module.go();
  scroll_module.hoveron();