移动端切屏效果

请问下就是当我点击红右边div滑入左边div滑出在手机端下怎么做啊

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我觉得你直接用jquery mobile吧你要自己做
就是控制  dom元素的 left
我们这边是用zepto的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
<title>transform</title>

<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
.d-tent{
background: #990;
height: 100%;
min-height: 320px;
width: 240px;
padding-bottom: 50px;
top: 0;
left: 0;
position: fixed;
-webkit-transition: all .2s linear 0s;
transition: all .2s linear 0s;
z-index:9;
}
.d-con{
width: 320px;
height:400px;
    margin: 0 auto;
background: #DCDCDC;
}
.d-con-head{
height:50px;
background:#0CF;
position:relative;
}
.d-con-head .d-m{
width:40px;
height:40px;
position:absolute;
right:20px;
top:5px;
background:#00BCF3;
cursor:pointer;
}</style>

<body> <div class="d-tent" style="-webkit-transform: translateX(320px); display: block;"></div>
    <div class="d-con">
     <div class="d-con-head">
       <div class="d-m"></div>
     </div>
    </div></body>
<script>
$(function(){
var t=true;
$(".d-m").click(
function(){
if(t){
$(".d-con").css('-webkit-transform','translateX(-240px)');
     $(".d-tent").css('-webkit-transform','translateX(80px)');
t=false;
}else{
$(".d-con").css('-webkit-transform','translateX(0)');
     $(".d-tent").css('-webkit-transform','translateX(320px)');
t=true;
}

})

})
</script>
</html>麻烦帮我看下这个效果我点击".d-m" 这个效果没有同步  再次点击".d-m" 效果返回的时候是同步的请问下这个是怎么回事

移动端 切屏效果

解决方案 »

移动端切屏效果