javascript實作 百度翻譯 可折疊的分享按鈕清單_javascript技巧

自從開始學習前端後，平常看到瀏覽器上的一些出彩的控制項都想自己實現一下O(∩_∩)O，不知大家有沒有這個感覺。接下來就跟大家分享一個，原控制來自百度翻譯右下方，大家仔細找應該可以找到，如圖：

感覺蠻有意思的，實作起來也不複雜，比較適合練手。好吧，廢話不多說了，直接上代碼吧。

html代碼：

複製程式碼 程式碼如下:

   
       
       
       
   
   
       

           
           

               
• 
                 
• 
                 
• 
                 
• 
                 
• 
                 
• 
                 
• 
                 
• 
             

       

       
   

css代碼：

複製程式碼 程式碼如下:

*{
  邊距：0px;
  填充：0px；
}
#縮放{
  位置：絕對；
  上：20px；
  右：200px；
  邊框：1px 實心 rgb(38,147,255);
  高度：40px；
  寬度：40px；
}
#縮放>跨度{
  顯示：內聯塊；
  位置：絕對；
  上：0px;
  底部：0px;
  左：0px；
  寬度：40px；
  背景圖片：url(sprite.png);
  背景重複：不重複；
  背景位置：-5px -7px;
  不透明度：0.8；
  過濾器:Alpha(不透明度=50);/*IE78*/
}
#zoom ul{
  顯示：無；
  位置：絕對；
  上：0px;
  底部：0px;
  左：50px；
  列表樣式：無；
}
#zoom ul li{
  顯示：內聯塊；
  *顯示：內嵌;/*IE7*/
  *縮放：1;/*IE7*/
  *左邊距：5px;/*IE7*/
  寬度：16px；
  高度：16px；
  上邊距：12px；
  背景圖片：url(sprite.png);
  背景重複：不重複；
}
#zoom .li1{
  背景位置：-57px -20px；
}
#zoom .li2{
  背景位置：-77px -20px；
}
#zoom .li3{
  背景位置：-98px -20px；
}
#zoom .li4{
  背景位置：-119px -20px；
}
#zoom .li5{
  背景位置：-140px -20px；
}
#zoom .li6{
  背景位置：-161px -20px；
}
#zoom .li7{
  背景位置：-182px -20px；
}
#zoom .li8{
  背景位置：-203px -20px；
}

#zoom li:hover{
  遊標：指針；
  不透明度：0.8；
  過濾器:Alpha(不透明度=50);/*IE78*/
}
#縮放範圍：懸停{
  遊標：指針；
  不透明度：1；
  過濾器:Alpha(不透明度=100);/*IE78*/
}

js程式碼：

複製程式碼程式碼如下：

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       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(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);

私がアップロードした画像リソースを直接使用することも可能です (強力なインターネットのおかげで^_^)。

以下は私が達成した効果のデモンストレーションです:

それでは、執筆プロセスにおける主な技術的なポイントについてお話しましょう:

コントロールは IE7 と互換性があります。手元に IE6 がないため、テストできません。解決すべき主な互換性の問題はコード内に示されています。
これは CSS スプライト テクノロジーを使用しています。もうすでに発見されているはずです^_^。優れたテクノロジーを使用する必要があります。

JS にクロージャーを適用して、グローバル汚染を回避します。

HTMLでは、scriptタグが本文の下部に配置されますが、この細かい点にも注目します（すべてローカルリソースですが╮(╯▽╰)╭）。
これで終わりですが、この小さなコントロールにはまだ改善の余地があります。たとえば、css3 属性を使用して div の動的なスケーリングを実現したり、このコントロールをコンポーネント化したり、JQ フレームワークを使用してさらに実装したりできます。便利に（JQ Practice））など。

上記はこの記事で皆さんに共有した内容のすべてです。気に入っていただければ幸いです。