点击向左慢慢展开更多工具栏
点击工具按钮,工具栏从工具按钮处向左慢慢出现。
实现思路:
工具栏由两个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;
}


浙公网安备 33010602011771号