请教JS高手

想用JS控制一个DIV层
当键盘按回车的时候，他从屏幕的底下出来（一开始是看不见的），在按回车然后下去。
怎么做？要动画的效果，不用jquery,要用原生的JS写。谢了

解决方案 »

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

你必须让页面的BODY获得事件才行
即默认情况下你的document里的任何一个元素在获得焦点的情况下才有可能接受到你的回车事件
没时间给你写了。你将就调整下啊~~尤其是IE6下的兼容性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div{
height:80px;
width:200px;
border:dashed 1px #333;
position:fixed;
right:0px;
}
</style>
<script type="text/javascript">
var pa,div;
var status = false;
window.onload = function(){
div = document.getElementById("divthis");
document.getElementById("test").focus();
document.onkeydown = function(event){
var e = window.event || event;
if(e.keyCode == 13) {
pa = setInterval(function(){
if(!status && parseInt(div.style.bottom) < 0) {
div.style.bottom = (parseInt(div.style.bottom)+1).toString() + "px";
}
else if (status && parseInt(div.style.bottom) > -80) {
div.style.bottom = (parseInt(div.style.bottom)-1).toString() + "px";
}
else {
clearInterval(pa);
status = !status;
}
},30);

}
};
};
</script>
</head>
<body>
<input type="text" id="test" />
<div id="divthis" style="bottom:-80px;"></div>
</body>
</html>
<script language="javascript" for="document" event="onkeydown">
        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        if (keyCode == 13) {
             controlForm(1);
        }
    </script>  以上代码是监听回车的，我只能给你大概思路。
下面是网上一个比较类似的效果，你去看看。
http://js.alixixi.com/a/2010091564729.shtml，
// Lee dialog 1.0 http://www.xij.cn/blog/?p=68var dialogFirst=true;
function dialog(title,content,width,height,cssName){if(dialogFirst==true){
  var _style='cursor:pointer;float:right; margin:20px 20px 10px 0px; width:100px; height:25px;line-height:25px; background:#f79859;';
  var temp_float=new String;
  temp_float="<div id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;\"></div>";
  temp_float+="<div id=\"floatBox\" class=\"floatBox\">";
  temp_float+="<div class=\"title\"><h4></h4><span>关闭</span></div>";
  temp_float+="<div class=\"content\"></div>";
  temp_float+="<div style=\"cursor:pointer;float:right;background:#FFFFFF; margin:0px 20px 10px 0px; width:100%; height:48px;line-height:25px; background:#ffffff;\">";
  temp_float+='<span style=\" background:#f79859;display:bolck; height:25px;float:right;width:90px; margin:15px 15px 0px 0px;color:#FFFFFF;\">好的,我知道了</span></div>';
  temp_float+="</div>";
  $("body").append(temp_float);
  dialogFirst=false;
}$("#floatBox span").click(function(){
  $("#floatBoxBg").animate({opacity:"0"},"normal",function(){$(this).hide();});
  $("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();});
  window.location=window.location;
});$("#floatBox .title h4").html(title);
contentType=content.substring(0,content.indexOf(":"));
content=content.substring(content.indexOf(":")+1,content.length);
switch(contentType){
  case "url":
  var content_array=content.split("?");
  $("#floatBox .content").ajaxStart(function(){
    $(this).html("loading...");
  });
  $.ajax({
    type:content_array[0],
    url:content_array[1],
    data:content_array[2],
error:function(){
  $("#floatBox .content").html("error...");
},
    success:function(html){
      $("#floatBox .content").html(html);
    }
  });
  break;
  case "text":
  $("#floatBox .content").html(content);
  break;
  case "id":
  $("#floatBox .content").html($("#"+content+"").html());
  break;
  case "iframe":
  $("#floatBox .content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+(parseInt(height)-30)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
}$("#floatBoxBg").show();
$("#floatBoxBg").animate({opacity:"0.5"},"normal");
$("#floatBox").attr("class","floatBox "+cssName);
$("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2))+"px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px",width:width,height:height});
$("#floatBox").animate({top:($(document).scrollTop()+150)+"px"},"normal");
}
调用方法：
dialog("信息提示","text:<img src=\"/image/001.gif\" /> 您还没有登陆，请登录","300px","150px","text")
给楼主发一个。
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body{margin:0;padding:0;overflow:hidden;}
.rbDiv{width:100px;height:60px;border:1px #FF3333 solid;position:absolute;right:0;bottom:-62px;}
</style>
<script type="text/javascript">
function addEvent(o, t, f){
    if(o.addEventListener){
    o.addEventListener(t, f, false);
}else if(o.attachEvent){
    o.attachEvent("on" + t, f);
}else{
    o["on" + t] = f;
}
}
var show = false;
addEvent(window, "load", winLoad);
function winLoad(){
    addEvent(document, "keyup", docKeyup);
}
function docKeyup(e){
    var e = e || window.event;
var keycode = e.keyCode || e.which || e.charCode;
if(keycode == 13){
    show = !show;
animate();
}
}
function animate(){
    var rbDiv = document.getElementById("rbDiv");
var rbH, rbB, timer, step=2, speed=30;
rbH = rbDiv.offsetHeight;
window.clearInterval(timer);
timer = window.setInterval(function(){
    rbB = getBottom(rbDiv);
if(rbB > 0 || rbB < -rbH){
window.clearInterval(timer);
if(rbB >0){
    rbB = 0;
}
if(rbB < -rbH){
    rbB = -rbH;
}
rbDiv.style.bottom = rbB + "px";
return;
}
if(show){   //show div
    rbDiv.style.bottom = rbB + step + "px";
}else
{
    rbDiv.style.bottom = rbB - step + "px";
}
}, speed);
}
function getBottom(obj){
    var b;
b = parseInt((obj.currentStyle || document.defaultView.getComputedStyle(obj,null)).bottom);
return b;
}
</script>
</head><body>
<div id="rbDiv" class="rbDiv"></div>
</body>
</html>