欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn) 百度翻譯 可折疊的分享按鈕列表

 更新時(shí)間：2015年03月12日 09:56:41   投稿：hebedich  
這篇文章主要介紹了javascript實(shí)現(xiàn) 百度翻譯 可折疊的分享按鈕列表的方法,需要的朋友可以參考下

自從開始學(xué)習(xí)前端后，平時(shí)看到瀏覽器上的一些出彩的控件都想自己實(shí)現(xiàn)一下O(∩_∩)O，不知大家有沒有這個(gè)感覺。接下來就和大家分享一個(gè)，原控件來自百度翻譯右下方，大家仔細(xì)找找應(yīng)該能找到，如圖所示：

感覺蠻有意思的，實(shí)現(xiàn)起來也不復(fù)雜，比較適合練手。好吧，廢話不多說了，直接上代碼吧。

html代碼：

復(fù)制代碼 代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = 'utf-8'/>
        <title>zoom</title>
        <link rel="stylesheet" type="text/css" href="zoom.css"/>
    </head>
    <body onload = "zoom()">
        <div id = 'zoom'>
            <span title = "分享....."></span>
            <ul>
                <li title="QQ空間" class="li1"></li>
                <li title="騰訊微博" class="li2"></li>
                <li title="新浪微博" class="li3"></li>
                <li title="人人網(wǎng)" class="li4"></li>
                <li title="百度" class="li5"></li>
                <li title="豆瓣網(wǎng)" class="li6"></li>
                <li title="搜狐" class="li7"></li>
                <li title="開心網(wǎng)" class="li8"></li>
            </ul>
        </div>
        <script type="text/javascript" src = "zoom.js"></script>
    </body>
</html>

css代碼：

復(fù)制代碼 代碼如下:

*{
  margin:0px;
  padding:0px;
}
#zoom{
  position: absolute;
  top: 20px;
  right: 200px;
  border: 1px solid rgb(38,147,255);
  height: 40px;
  width: 40px;
}
#zoom > span{
  display: inline-block;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 40px;
  background-image: url(sprite.png);
  background-repeat: no-repeat;
  background-position: -5px -7px;
  opacity: 0.8;
  filter:Alpha(opacity=50);/*IE78*/
}
#zoom ul{
  display: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50px;
  list-style: none;
}
#zoom ul li{
  display: inline-block;
  *display: inline;/*IE7*/
  *zoom:1;/*IE7*/
  *margin-left: 5px;/*IE7*/
  width: 16px;
  height: 16px;
  margin-top: 12px;
  background-image: url(sprite.png);
  background-repeat: no-repeat;
}
#zoom .li1{
  background-position: -57px -20px;
}
#zoom .li2{
  background-position: -77px -20px;
}
#zoom .li3{
  background-position: -98px -20px;
}
#zoom .li4{
  background-position: -119px -20px;
}
#zoom .li5{
  background-position: -140px -20px;
}
#zoom .li6{
  background-position: -161px -20px;
}
#zoom .li7{
  background-position: -182px -20px;
}
#zoom .li8{
  background-position: -203px -20px;
}

#zoom li:hover{
  cursor: pointer;
  opacity: 0.8;
  filter:Alpha(opacity=50);/*IE78*/
}
#zoom span:hover{
  cursor: pointer;
  opacity: 1;
  filter:Alpha(opacity=100);/*IE78*/
}

js代碼：

復(fù)制代碼 代碼如下:

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的注冊(cè)事件方法*/
  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的阻止默認(rèn)事件方法*/
  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)
    }
  };
  /*關(guān)閉控件*/
  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);
    }
  };
  /*點(diǎn)擊觸發(fā)按鈕的回調(diào)*/
  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中兩處：

復(fù)制代碼 代碼如下:

background-image: url(sprite.png);

改為：

復(fù)制代碼 代碼如下:

直接使用我上傳的這個(gè)圖片資源也是可以的（感謝強(qiáng)大的互聯(lián)網(wǎng)^_^）。

接下來是我實(shí)現(xiàn)的效果展示：

接著說說，我在編寫過程中的主要技術(shù)要點(diǎn)：

控件兼容到IE7，手頭沒有IE6，無法測(cè)試了，主要解決的兼容問題代碼中都有標(biāo)注。
采用了css sprites 技術(shù)，大家應(yīng)該已經(jīng)發(fā)現(xiàn)了吧^_^，好技術(shù)就要用。

JS中應(yīng)用閉包，避免全局污染。

在html中script標(biāo)簽放到body底部，這種小細(xì)節(jié)俺也會(huì)注意到的（雖然都是本地資源╮(╯▽╰)╭）。
好吧，就是這些，不過這個(gè)小控件，還是有進(jìn)一步完善的余地的，比如，可以使用css3屬性來實(shí)現(xiàn)div的動(dòng)態(tài)伸縮，可以將這個(gè)控件組件化，可以用JQ框架更加方便的實(shí)現(xiàn)（JQ練手）等等。

以上就是本文分享給大家的全部?jī)?nèi)容了，希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論