現(xiàn)在大家在瀏覽網(wǎng)站的時(shí)候，經(jīng)常會(huì)發(fā)現(xiàn)一些浮動(dòng)的條狀欄，通常具有向上向下的功能，當(dāng)你點(diǎn)擊一下，就可以方便的回到頂部或者前往底部。其實(shí)打造這樣一個(gè)工具邊欄，并不是很難，使用jquery很容易就可以做出來。下面，你跟隨我的步驟，一步一步的做一下，就可以做出來了，然后你可以根據(jù)這個(gè)代碼，進(jìn)行一些修改，自定義一些東西。

廢話不多說，先說一下我做的這個(gè)工具邊欄。這個(gè)工具邊欄是符合我自己做的模板“Q21”，Q21模板的特點(diǎn)是黑白對比，所以這個(gè)工具邊欄要突出黑白變化。經(jīng)過構(gòu)思之后，我決定這個(gè)邊欄的樣式是這樣的：

當(dāng)鼠標(biāo)移動(dòng)到“分享”按鈕上之后，會(huì)自動(dòng)滑出一個(gè)黑條，然后黑條上是各個(gè)分享按鈕。具體的演示效果，你可以下載最后代碼包查看。下面我們來開始動(dòng)手一步一步的制作。

建立html結(jié)構(gòu)

用span標(biāo)簽也行，不過我還是喜歡用div，所以就用div來建立html結(jié)構(gòu)。結(jié)構(gòu)很明確了吧，一個(gè)大div包含三個(gè)小div，分別是上中下三個(gè)按鈕，其中分享按鈕中，還需要再包含一個(gè)div，用來滑出分享按鈕。好了，結(jié)構(gòu)就建好了。

<div id=”tooltip” >
  <div id=”toolt”>▲</div>
  <div id=”toolc” >
    <div id=”sharetxt”>分享</div>
    <div id=”shareit” class=”none”>這里是分享代碼</div>
  </div>
  <div id=”toolb”>▼</div>
</div>

注意，向上向下按鈕，我使用的是字符，而不是圖片。如果是圖片的話，需要加載，而且動(dòng)態(tài)變化，需要替換圖片更加的不方便。至于如何打出這個(gè)上下兩個(gè)三角號(hào)，就靠你的搜狗輸入法了，如下圖：

好了，有了html結(jié)構(gòu)，我們再來定義一些css。

CSS代碼

首先定義全局的字體

:root{font-family:”5FAE8F6F96C59ED1”,helvetica,Arial;}

經(jīng)測試，這個(gè)邊欄，在微軟雅黑的字體下效果最好，所以要規(guī)定網(wǎng)頁使用微軟雅黑。上面這句代碼，：root表示選擇html根，對所有文檔中的元素生效，其中5FAE8F6F96C59ED1表示的就是微軟雅黑，至于為什么這樣寫而不寫成“微軟雅黑”，如果用戶電腦是英文的，那肯定找不到微軟雅黑這個(gè)字體，這樣寫法，只要有微軟雅黑字體，就可以使用。
定位工具條位置

div[id=”tooltip”]{
  width:40px;
  height:120px;
  position:fixed;
  bottom:50%;
  right:20px;
  }

這幾句css定義了工具邊欄的高度和寬度，同時(shí)position：fixed表示讓它固定在頁面中，不會(huì)根據(jù)滾動(dòng)條的滾動(dòng)而移動(dòng)。bottom：50%，讓它保持在頁面中部位置，right：20px表示讓它距離右邊20個(gè)像素。
響應(yīng)操作

div[id^=”tool”]{
  font-size:38px;
  cursor:pointer;
  color:#000000;
  }
div[id^=”tool”]:hover{
  color:#999999;
  }

響應(yīng)操作可以讓工具更加人性化，例如上圖效果，當(dāng)我們把鼠標(biāo)移動(dòng)到箭頭的時(shí)候，它會(huì)變成灰色，表示你已經(jīng)把箭頭移動(dòng)到上面了。在這里，我使用了新型的選擇器div[id^=”tool”]它的意思是，選取所有以tool開頭的div標(biāo)簽。定義字體大小為38px，調(diào)整三角形成為合適大小。設(shè)定cursor：pointer屬性，當(dāng)你鼠標(biāo)移動(dòng)到上面的時(shí)候，會(huì)顯示成手指形狀，讓你誤以為是一個(gè)可以點(diǎn)擊的鏈接。下面的語句，當(dāng)你鼠標(biāo)移動(dòng)到上面的時(shí)候，顏色變成#999999。這是響應(yīng)操作，提高用戶體驗(yàn)。
中部CSS代碼

div[id=”toolc”]{
  font-size:22px;
  float:right;
  width:40px;
  height:70px;
  overflow:hidden;
   }
div[id=”sharetxt”]{
width:26px;
margin-right:8px;
float:right;
height:70px;
display:inline;
margin-top:4px;
}
div[id=”shareit”]{
width:304px;
height:62px;
float:right;
height:30px;
margin:15px 0px;
}
.none{
display:none;
}
.inline{
display:inline;
}

比較簡單，沒有什么亮點(diǎn)，自己看看就行了。重點(diǎn)在于如何實(shí)現(xiàn)滑動(dòng)出現(xiàn)分享按鈕。我采用的方法是，定義兩個(gè)div，浮動(dòng)放置，其中分享按鈕那個(gè)div默認(rèn)是隱藏的，只有鼠標(biāo)移動(dòng)上去觸發(fā)之后，它才會(huì)顯示出來。

Jquery代碼

在添加jquery代碼之前，我們需要徹底理清滑出分享按鈕的實(shí)現(xiàn)方式。jquery并沒有提供橫向滑動(dòng)出現(xiàn)的方法，那要怎么實(shí)現(xiàn)呢？可以這樣實(shí)現(xiàn)，先把底色變成黑色，讓裝載分享按鈕的div框出現(xiàn)，但是這時(shí)候由于寬度不夠顯示分享按鈕div，所以你暫時(shí)看不到。使用jquery的animate方法，讓寬度逐漸變寬，直到完全顯示分享按鈕div。這樣就會(huì)造成一個(gè)假象，黑色滑出，然后出現(xiàn)分享按鈕。

具體的實(shí)現(xiàn)代碼如下

$(function(){
  $(“#toolc”).mouseenter(function(){ //這里使用mouseenter方法來觸發(fā),當(dāng)鼠標(biāo)移動(dòng)上去之后,觸發(fā)這個(gè)方法
    $(“#toolc”).css({“color”:”#ffffff”,”backgroundColor”:”#000000”}); //先對中部添加背景,并且把文字變成白色
    $(“#shareit”).removeClass(“none”).addClass(“inline”); //去掉shareit的none,讓它顯示出來,但由于寬度不夠,無法顯示
    $(“#toolc”).animate({width:”350px”},200); //使用animate方法,動(dòng)態(tài)的改變寬度,直到顯示出來分享按鈕
  }).mouseleave(function(){ //當(dāng)鼠標(biāo)從目標(biāo)區(qū)域中移走,就觸發(fā)下面這個(gè)事件
    $(“#toolc”).css({“color”:”#000000”,”backgroundColor”:”#ffffff”}); //同反
    $(“#shareit”).removeClass(“inline”).addClass(“none”); //同反
    $(“#toolc”).animate({width:”40px”},200); //同反,你懂的
  });
  $(“#toolt”).click(function(){
    $(“html,body”).animate({scrollTop:”-=900px”},200); //每點(diǎn)擊一下,就向上滑動(dòng)900px
  });
  $(“#toolb”).click(function(){
    $(“html,body”).animate({scrollTop:”+=900px”},200); //每點(diǎn)擊一下,就向下滑動(dòng)900px
  });
});

注釋我已經(jīng)寫在上面代碼中了，仔細(xì)耐心看一下。這里,我想說的是向上向下滑動(dòng)900px。我并沒有讓它點(diǎn)擊直接到頂部或者底部。因?yàn)槲矣X得，如果文章比較長，瀏覽者并不一定想直接滑動(dòng)到底部，而是想看看下面的內(nèi)容。如果他真想滑動(dòng)到底部，也只需要點(diǎn)兩次或者三次按鈕即可。這也是一個(gè)用戶體驗(yàn)的細(xì)節(jié)。

最新評(píng)論