javascript实现 百度翻译 可折叠的分享按钮列表(2)

var zoom = (function(){
  var zoomDom = document.getElementById('zoom'),
      state = {opened: false, onaction: false, length: 0},
      showSpan,
      ul;
  if (zoomDom.firstElementChild) {
    showSpan = zoomDom.firstElementChild;
    ul = showSpan.nextElementSibling;
  }else{ /*IE*/
    showSpan = zoomDom.firstChild;
    ul = showSpan.nextSibling;
  }
  /*兼容IE78的注册事件方法*/
  var addEvent = function(el, eventType, eventHandler){
    if(el.addEventListener){
      el.addEventListener(eventType, eventHandler,false);
    } else if(el.attachEvent){
      el.attachEvent('on' + eventType, eventHandler);/*IE78*/
    }
  };
  /*兼容IE的阻止默认事件方法*/
  var stopDefault = function(e){
    if(e&&e.preventDefault){
      e.preventDefault();
    } else {
      window.event.returnValue = false;/*IE*/
    }
  };
  /*展开控件*/
  var onOpen = function(){
    if(state.length>250){
      ul.style.display = 'inline-block';
      state.onaction = false; state.opened = true;
    }else{
      if(!state.onaction){ state.onaction = true;}
      state.length += 10;
      zoomDom.style.width = state.length + 'px';
      setTimeout(onOpen, 0)
    }
  };
  /*关闭控件*/
  var onCollapse = function(){
    if(state.length<41){
      state.onaction = false; state.opened = false;
    }else{
      if(!state.onaction){ state.onaction = true;}
      state.length -= 10;
      zoomDom.style.width = state.length + 'px';
      setTimeout(onCollapse, 0);
    }
  };
  /*点击触发按钮的回调*/
  var onSpanClick = function(e){
    stopDefault(e);
    if(!state.onaction){
      if(!state.opened){
        onOpen();
      }else{
        ul.style.display = 'none';
        onCollapse();
      }
    }
  };
  return function(){
    addEvent(showSpan, 'click', onSpanClick);
  };
})();

下图是css中用到的图片（直接从百度翻译上截的图^_^）：

大家下下来，改改名字放到根目录下就行了,或者直接将css中两处：

复制代码 代码如下:

background-image: url(sprite.png);

改为：

复制代码 代码如下:

background-image: url();

直接使用我上传的这个图片资源也是可以的（感谢强大的互联网^_^）。

接下来是我实现的效果展示：

接着说说，我在编写过程中的主要技术要点：

控件兼容到IE7，手头没有IE6，无法测试了，主要解决的兼容问题代码中都有标注。
采用了css sprites 技术，大家应该已经发现了吧^_^，好技术就要用。

JS中应用闭包，避免全局污染。

在html中script标签放到body底部，这种小细节俺也会注意到的（虽然都是本地资源╮(╯▽╰)╭）。
好吧，就是这些，不过这个小控件，还是有进一步完善的余地的，比如，可以使用css3属性来实现div的动态伸缩，可以将这个控件组件化，可以用JQ框架更加方便的实现（JQ练手）等等。