小白之側拉欄

2022-03-15 02:28:41 字數 1620 閱讀 8331

小白之側拉欄

效果：

就是點選分享，從右邊拉出乙個div，再次點選回去。功能很簡單。

步驟：1.引入jquery。

<


script 


src="jquery/jquery-3.1.0.min.js"


>


script


>
2.建立按鈕和div。

<


button 


class


="buts"


>分享


button


>


<


div 


class


="divs"


>


div>
3.css，主要為按鈕和div的定位。

buttondiv
4.js

$(function


() ,'slow');


$(".divs").animate(,'slow');


}else


,'slow');


$(".divs").animate(,'slow');


}})})
html**展示：

doctype html


>


<


html


>


<


head 


lang


="en"


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


script 


src="jquery/jquery-3.1.0.min.js"


>


script


>


<


style


>


button


divstyle


>


head


>


<


body


>


<


button 


class


="buts"


>分享


button


>


<


div 


class


="divs"


>


div>


<


script


>


$(function


() ,


'slow');


$(".divs


").animate(,


'slow');


}else,'


slow');


$(".divs


").animate(,


'slow');


}})})


script


>


body


>


html


>
view code

mCustomScrollbar實現側欄

最近換工作了，呵呵呵呵呵 然後在做。要實現類似這種sliderbar的側邊欄 還不會用jquery自己做plugin,很憂傷。額 不過大概做出來了，這樣的效果，就是沒有整合元件哈。不能復用吧，不是很好的說 html 永珍助手 素材收集 高階功能 購買公升級 年付6.8折 幫助中心 返回舊版 js f...

ViewDragHelper詳解（側滑欄）

1.drag拖拽 viewdrag拖拽檢視，拖拽控制項 viewdraghelper拖拽檢視助手，拖拽操作類。利用viewdraghelper類可以實現很多絢麗的效果，比如 拖拽刪除，拖拽排序，側滑欄等。本篇主要講解簡易側滑欄的實現。注意 viewdraghelper是作用在乙個viewgroup上...

RecycleView的側拉索引

依賴 compile com.android.support recyclerview v7 23.1.1 compile ca.barrenechea.header decor header decor 0.2.6 support v7.widget recyclerview android id...