随手联系的一个滑动显示的工具框

最新推荐文章于 2017-08-13 10:56:08 发布

xc635960736

最新推荐文章于 2017-08-13 10:56:08 发布

阅读量723

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/xc635960736/article/details/9025907

版权

<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 οnlοad="reg()">
		<div id="s_menu" class="s-menu" style="right:50px; top: 41px; display:block;">
			<div class="s-menu-inner">
				<a href="#" οnclick="return false;" class="item add" id="addCon" title="添加内容" hidefocus></a>
				<a href="#" οnclick="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>

xc635960736

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随手联系的一个滑动显示的工具框

.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 .
复制链接

扫一扫