点击向左慢慢展开更多工具栏

点击工具按钮,工具栏从工具按钮处向左慢慢出现。

实现思路:

工具栏由两个div包裹,分别为toolbarbutton2和toolbarbutton2。

最外层的toolbarbutton定位在工具按钮的左侧,css设置为宽度为0且overflow;hidden.

里面的div toolbarbutton2 宽度固定,绝对定位。

之后用js animate控制 width的宽度

css-----------------------

#toolbarbutton {
position: absolute;
right: 430px;
top: 11px;
width: 0px;
height:38px;
overflow:hidden;
}

#toolbarbutton2 {
width:344px;
position:absolute;
}

#toolManages {
position: absolute;
right: 355px;
top: 11px;
width: auto;

}

html-------------------------------------------

<button id="toolManages">

工具
</button>
<div id="toolbarbutton">
<div id="toolbarbutton2">
隐藏的更多工具栏
</div>
</div>

js----------------------------------------------------

var toolManages  =0;

$("#toolManages").click(function () {
if (toolManages == 0) {
$("#toolbarbutton").animate({ width: "344px" }, 900);

toolManages =1;

}else{

$("#toolbarbutton").animate({ width: "0px" }, 900);

toolManages =0;

}

posted @ 2016-08-23 17:14  小哩  阅读(484)  评论(0)    收藏  举报