移动端 切屏效果 请问下 就是当我点击红 右边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" 效果返回的时候 是同步的 请问下这个是怎么回事 JQuery对类进行绑定事件时如何传值 正则怎么替换好 for循环问题 请教怎样可以禁止输入某些字符等 jquery 点击BUTTON按钮提示验证没有通过,然而后台还是执行了!! 如何使网页加载完后自动关闭窗,或者限时半闭不弹出窗半窗提示? ◆2003年9月27日(15:00)12位MVP齐聚CSDN总部 简单问题散分:怎样在netscape 浏览器中得到DIV对象 获取网站访客QQ号的代码为何不行了? express+nodejs的问题 很奇怪的现象 动态生成的<script>标签,如何获得百度地图返回数据呢? canvas单独设置font属性的问题
我觉得你直接用jquery mobile吧你要自己做
就是控制 dom元素的 left
<!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" 效果返回的时候 是同步的 请问下这个是怎么回事