html 做从右向左的div展开收缩,div上有帐号密码输入框，看清楚下面效果图。div里的跟着动
1个回答
展开全部
设置一个div,position:absolute;然后用js控制就OK。这么简单的动画
追问
贴下完整代码，点一个键接就展开开DIV 点DIV上的 X就缩回去。我是新手代码加下注释。
追答
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style media="screen">
body{
margin:0px;
}
.page{
border:1px solid #000;
width:300px;
height:95%;
position:fixed;
_position:absolute;
top:0px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="Divtoggle()">点击登录</a>
<div class="page" id="page">
<span onclick="Divtoggle()">关闭</span>
<p>UserName:<input type="text" value=""></p>
<p>PassWord:<input type="password" value=""></p>
</div>
</body>
</html>
<script charset="utf-8">
var dom=document.getElementById("page");
window.onload=function()
{
dom.style.right="-305px";
}
var a=0;
function Divtoggle()
{
if(a==0)
{
var i=-305;
var s=setInterval(function(){
if(i>0)
{
a=1;
clearInterval(s);
}else
{
dom.style.right=i+"px";
i=i+5;
}
},10);
}else if(a==1)
{
var j=0;
var cs=setInterval(function(){
if(j<-305)
{
a=0;
clearInterval(cs);
}else
{
dom.style.right=j+"px";
j=j-5;
}
},10);
}
}
</script>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
