用javascript控制div的显示从下方逐渐出现

发布网友发布时间：2022-04-24 04:28

共5个回答

懂视网时间：2022-04-24 08:49

第一种按钮控制
首先创建两个html按钮和一个div并给div一个样式

input type="button" value="左" id="1">
<input type="button" value="右" id="2">
<div id="3">
div {
  width: 100px;
  height: 100px;
  background-color: bisque;
  position: absolute;
  left: 100px;
  top: 100px;
 }

然后在script中获得div和两个按钮

var left = document.getElementById("2");
 var right = document.getElementById("1");
 var div = document.getElementById("3");

然后添加onclick函数

left.onclick = function () {
  
 }
 right.onclick = function () {
 
 }

设置一个变量，控制div的left改变

var x = 100;

当点击按钮时触发

left.onclick = function () {
  x=x+10;
  div.style.left = x+"px";
 }
 right.onclick = function () {
 x=x-10;
 div.style.left = x+"px";
 }

源码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 div {  width: 100px;  height: 100px;  background-color: bisque; 
  position: absolute;  left: 100px;  top: 100px;  }
 </style>
</head>
<body>
<input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div id="3"> </div>

<script>
 var left = document.getElementById("2"); var right = document.getElementById("1"); 
 var div = document.getElementById("3");
 var x = 100;
 left.onclick = function () {  x=x+10;  div.style.left = x+"px"; 
 } right.onclick = function () {  x=x-10;  div.style.left = x+"px"; }

</script>

</body>
</html>

第二种，键值控制
同样在html中创建div并给其样式

<div id="3">
</div>
<style>
 div {
  width: 100px;
  height: 100px;
  background-color: bisque;
  position: absolute;
  left: 100px;
  top: 100px;
 }
 </style>

在script里面获得div

var div=document.getElementById("3");

然后声明两个变量控制改变div的left和top

var px=100;
 var py =100;

然后获得键值
document.onkeydown（在document文档对象中，按任何键都会触发此函数）
alert中输出的event.keyCode会对应按键时，当前键相应的事件值（即每一个按键对应为一个键值）

document.onkeydown = function(){
 alert(event.keyCode);
}

然后通过测试上下左右得到键值，在swich语句中改变div的left和top改变其位置

switch (event.keyCode){
  case 37:
  px = px-10;
  div.style.left = px+"px";
  break;
  case 38:
  py = py-10;
  div.style.top = py+"px";
  break;
  case 39:
  px = px+10;
  div.style.left = px+"px";
  break;
  case 40:
  py = py+10;
  div.style.top = py+"px";
  break;
 }

源码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 div {  width: 100px;  height: 100px;  
 background-color: bisque;  position: absolute;  left: 100px;  
  top: 100px;  }
 </style>
</head>
<body>

<div id="3"> </div>

<script>

 var div=document.getElementById("3");
 var px=100;
 var py =100;
 document.onkeydown = function(){
// alert(event.keyCode);
 switch (event.keyCode){  case 37:  px = px-10;  
  div.style.left = px+"px";   break;  case 38:  
  py = py-10;   div.style.top = py+"px";   break;  
  case 39:   px = px+10;   div.style.left = px+"px";  
  break;  case 40:   py = py+10;   div.style.top = py+"px";   break;  }
 }

</script>

</body>
</html>

热心网友时间：2022-04-24 05:57

//html
<div id="show">show</div>
//css;
#show {width: 100px;height: 100px; background: #ccc; display: none;}
//js file;
window.onload = function () {
//根据ID返回dom元素
var $ = function(id){return document.getElementById(id);}
//返回dom元素的当前某css值
var getCss = function(obj,name){
if(obj.currentStyle) {//for ie ;
return obj.currentStyle[name];
}else { // for ff;
var style = document.defaultView.getComputedStyle(obj,null);
return style[name];
}
}

var show = function(obj,speed){
obj = $(obj);
if (!speed) {
obj.style.display = 'block';
return;
}
var initH = 0 , initW = 0;
//获取dom的宽与高
var oWidth = getCss(obj,'width').replace('px',''), oHeight = getCss(obj,'height').replace('px','');
//每次dom的递减数(等比例)
var wcut = 2*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut = 2;
//处理动画函数
var process = function(){
obj.style.overflow = 'hidden';
obj.style.display = 'block';
initW = (initW+wcut) > oWidth ? oWidth : initW+wcut;
initH = (initH+hcut) > oHeight ? oHeight : initH+hcut;
//判断是否减完了
if(initW !== oWidth || initH !== oHeight) {
//obj.style.width = initW+'px';
obj.style.height = initH+'px';

setTimeout(function(){process();},speed);
}else {
//加完后，设置属性为显示以及原本dom的宽与高;
//obj.style.width = oWidth+'px';
obj.style.height = oHeight+'px';

}
}
process();
}
show("show",50);
}

热心网友时间：2022-04-24 07:15

javascript操作对象略显麻烦，建议采用Jquery.

Jquery代码如下

$("button").click(function(){
$("div").animate({bottom:'250px'});
});

热心网友时间：2022-04-24 08:50

用jquery的话，有现成的方法。slideout和slidein方法。
用javascript写的话，需要用setInterval方法，不断的改变div的top来实现。

热心网友时间：2022-04-24 10:41

functionchangeBody(index){switch(index){case1:{document.getElementById('iDBody1').style.display="";document.getElementById('iDBody2').style.display="none";document.getElementById('iDBody3').style.display="none";}case2:{document.getElementById('iDBody1').style.display="none";document.getElementById('iDBody2').style.display="";document.getElementById('iDBody3').style.display="none";}case3:{document.getElementById('iDBody1').style.display="none";document.getElementById('iDBody2').style.display="none";document.getElementById('iDBody3').style.display="";}}}