master

分支 (1)

管理

管理

master

weui
/
左侧滑动.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dodou-移动框架</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="css/weui.css">
	<link rel="stylesheet" href="css/jquery-weui.css">
	<link rel="stylesheet" href="css/style.css">
	<style>
	    .popleft{
	    	z-index: 100;
	    }
		.popleft,.popleft .close-popleft,.popleft .content-popleft{
			position: fixed;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    height: 0;
		    width: 100%;
		    height: 100%;
		    z-index: 10;
		    -webkit-tap-highlight-color: transparent;
		}
		.popleft .close-popleft{
		    background-color: rgba(0, 0, 0, 1);
		    opacity: .7;
		    -webkit-transition: opacity .3s;
		    transition: opacity .3s;
		}
		.popleft .close-popleft span{
			position: fixed;
			right: 10%;
			top: 50%;
			-webkit-transform:translate(0,-50%);
			width: 15px;
		    font-size: 14px;
		    line-height: 14px;
		    color: #B5B5B5;
		}
		.popleft .close-popleft i{
			display: block;
		    width: 15px;
		    height: 15px;
		    margin: 10px 0 0;
		    background-repeat: no-repeat;
		    background-position: center center;
		    background-size: 100%;
		    background-image:url(images/return.png);
		}
		.popleft .content-popleft{
			position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 20;
		    overflow: hidden;
			width: 80%;
			background:#fff;
			-webkit-box-shadow: 6px 0 10px 0 rgba(0,0,0,.4);
		    box-shadow: 6px 0 10px 0 rgba(0,0,0,.4);
		    -webkit-transition: -webkit-transform .5s cubic-bezier(.165,.84,.44,1);
		    transition: transform .5s cubic-bezier(.165,.84,.44,1);
		    transform:translateX(-100%);
		}

	</style>
</head>
<body style="background:#f3f3f3;">
    <a href="javascript:;" onclick="LeftOpen()" class="weui-btn weui-btn_primary open-popup">显示左侧导航</a>

    <div class="popleft" style="display: none;">
    	<div class="close-popleft" onclick="LeftClose()"><span>点击此处返回<i></i></span></div>
    	<div class="content-popleft">
    		导航信息
    	</div>
    </div>


	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-weui.min.js"></script>
	<script>
        //开启
        function LeftOpen(){
        	$('.popleft').css({
					"display":"block"
				});
			setTimeout(function(){
				$('.content-popleft').css({
					"transform":"translateX(0)"
				});
			},100);
        }
        //关闭
	  	function LeftClose(){
			$('.content-popleft').css({
				"transform":"translateX(-100%)"
			});
			setTimeout(function(){
				$('.popleft').css({
					"display":"none"
				});
			},600);

		};
	</script>
</body>
</html>