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

使用jQuery制作浮動工具欄的實例分享

 更新時間:2016年05月13日 15:50:08   作者:潛行者m  
這里所說的浮動工具欄就是大家平時看到的社交網(wǎng)絡(luò)分享按鈕欄那樣的效果,可以做成浮動效果且能上下移動,這里我們就來看一個使用jQuery制作頁面工具邊欄的實例分享.

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

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

2016513154338569.jpg (500×200)

當鼠標移動到“分享”按鈕上之后,會自動滑出一個黑條,然后黑條上是各個分享按鈕。具體的演示效果,你可以下載最后代碼包查看。下面我們來開始動手一步一步的制作。

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

用span標簽也行,不過我還是喜歡用div,所以就用div來建立html結(jié)構(gòu)。結(jié)構(gòu)很明確了吧,一個大div包含三個小div,分別是上中下三個按鈕,其中分享按鈕中,還需要再包含一個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>

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

2016513154426944.jpg (561×457)

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

CSS代碼

首先定義全局的字體

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

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

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

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

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

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

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

Jquery代碼

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

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

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

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

相關(guān)文章

  • 基于jquery的返回頂部效果(兼容IE6)

    基于jquery的返回頂部效果(兼容IE6)

    最近在寫一個首頁返回頂部的效果,因為IE6不兼容position:fixed的原因,一直找不到好的解決辦法。在Google了一下,有了點眉目,加上一點自己的開發(fā),總算誤打誤撞的把問題解決了。
    2011-01-01
  • jquery.qrcode在線生成二維碼使用示例

    jquery.qrcode在線生成二維碼使用示例

    jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件,可以完成各種美好的效果和功能。jquery.qrcode就是其中一個,用來在線生成二維碼
    2013-08-08
  • jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能示例

    jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能示例

    這篇文章主要介紹了jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能,涉及jQuery事件響應及窗口元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
    2017-10-10
  • 使表格的標題列可左右拉伸jquery插件封裝

    使表格的標題列可左右拉伸jquery插件封裝

    這篇文章主要介紹了使表格的標題列可左右拉伸jquery插件封裝,需要的朋友可以參考下
    2014-11-11
  • Ext.get() 和 Ext.query()組合使用實現(xiàn)最靈活的取元素方式

    Ext.get() 和 Ext.query()組合使用實現(xiàn)最靈活的取元素方式

    想要利用ExtJS的庫函數(shù)對DOM進行各類操作,就要得到Element類型的對象,但是Ext.get()取到的雖然是Element,但是參數(shù)只能是id,如果大家對jQuery的selector方式很喜歡和崇拜,那么就一定要學習Ext.get()和Ext.query()的組合方式。
    2011-09-09
  • 基于jquery實現(xiàn)三級下拉菜單

    基于jquery實現(xiàn)三級下拉菜單

    這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)三級下拉菜單的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • jQuery動態(tài)添加與刪除tr行實例代碼

    jQuery動態(tài)添加與刪除tr行實例代碼

    最近由于項目的需要,需要動態(tài)的添加和刪除table中的tr,感覺用JS可以實現(xiàn),但是在網(wǎng)上找了一下,單純的自己寫JS,感覺太麻煩,而且也不好維護。于是想到了最近學的jQuery。這篇文章給大家用實例介紹了jQuery動態(tài)添加與刪除tr行的方法,有需要的朋友們可以參考借鑒。
    2016-10-10
  • 把jquery 的dialog和ztree結(jié)合實現(xiàn)步驟

    把jquery 的dialog和ztree結(jié)合實現(xiàn)步驟

    首先準備好juqury-ui、ztree 的js文件和css 文件,接下來的步驟祥看本文希望對大家有所幫助
    2013-08-08
  • 利用jQuery實現(xiàn)可輸入搜索文字的下拉框

    利用jQuery實現(xiàn)可輸入搜索文字的下拉框

    jQuery實現(xiàn)點擊下拉框輸入框時,自動顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動在后臺查找,然后傳到前臺,展現(xiàn)頁面
    2013-10-10
  • jQuery簡單動畫變換效果實例分析

    jQuery簡單動畫變換效果實例分析

    這篇文章主要介紹了jQuery簡單動畫變換效果,結(jié)合實例形式分析了jQuery使用toggle及animate等方法動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
    2016-07-07

最新評論