随手联系的一个滑动显示的工具框
来源：互联网 发布：增长率算法 编辑：程序博客网 时间：2024/06/08 14:12
<html><head></head><style>.s-menu {width: 36px;position: fixed;_position: absolute;z-index: 501;}.s-menu .s-menu-inner .item.add{background-position:0 -38px;z-index:502;}.s-menu .s-menu-inner .item.advice{background-position:0 -76px;z-index:502;}.s-menu .s-menu-inner .item{display:inline-block;position:relative;width:36px;height:36px;outline:none;background:url('menubar_bg_tm.png') no-repeat;margin-bottom: 2px;}.s-pk-addpnl .pk-addlayer{border:1px solid #D5D5D5;position:relative;width:678px;height:221px;overflow:hidden;background:white;-webkit-transition: height .2s ease-in-out;-o-transition: height .2s ease-in-out;-moz-transition: height .2s ease-in-out;transition: height .2s ease-in-out;}.s-pk-addpnl{position:absolute;overflow:hidden;right:37px;border: 4px solid #F0F0F0;}.s-pk-addpnl .pk-row {float: left;width: 129px;border-right: 1px solid #E5E5E5;height: 221px;text-align: center;}</style><script> var changeFlag = 0; var $ = function(id){return document.getElementById(id);}/***显示出tool框*/var changeShow = function(e){var tar = $('s-pk-addpn1');var width = 680;var height = 223;var beginWidth = 0;tar.style.height = height+"px";tar.style.opacity = 1;function addWidthAndHeight(){ beginWidth = beginWidth + 8;tar.style.width = beginWidth+"px";if(beginWidth>=width){clearInterval(intv);}}intv = setInterval(addWidthAndHeight,1);}/***隐藏tool框*/var changeHidden = function(e){var tar = $('s-pk-addpn1');var width = 680;var movePixel = 0;tar.style.opacity = 1;function addWidthAndHeight(){ movePixel = movePixel + 8;tar.style.width = width - movePixel+"px";if(movePixel>=width){clearInterval(intv);tar.style.opacity = 0;}}intv = setInterval(addWidthAndHeight,1);}var change = function(e){if(changeFlag == 0){changeShow(e);changeFlag = 1;}else{changeHidden(e);changeFlag = 0;}}var reg = function(){var e = $('addCon');if(e.addEventListener){e.addEventListener("click",change);}else if(e.attachEvent){e.addachEvent('onClick',change);}}</script><body onload="reg()"><div id="s_menu" class="s-menu" style="right:50px; top: 41px; display:block;"><div class="s-menu-inner"><a href="#" onclick="return false;" class="item add" id="addCon" title="添加内容" hidefocus></a><a href="#" onclick="return false;" class="item advice" title="意见反馈" hidefocus></a><div class="s-pk-addpnl border" id="s-pk-addpn1" style="top:0px; width:0px; height:0px; opacity:0;"><div class="pk-addlayer"><div class="pk-row pk-row-recommend"></div><div class="pk-row pk-row-recommend"></div><div class="pk-row pk-row-recommend"></div><div class="pk-row pk-row-recommend"></div><div class="pk-row pk-row-recommend"></div></div></div></div></div><body></html>
