可以使用css中的position来对div进行定位来改变div的位置,position可能的值如下:
工具原料:编辑器、浏览器
1、通过设置一个div的position的值来调整div的位置,简单的代码示例如下:
body><div id="div2"></div>
<style>
div{
border: 1px solid red
width: 200px
height: 200px
position: absolute
right: 200px
bottom: 200px
}
</style>
</body>
2、设置一个宽高为200像素的div距body的右边200像素底部200像素,运行的效果如下图:
<html><head>
<meta charset="utf-8">
<style>
.动1{
position: absolute
left: 30px
top: 200px
}
</style>
<script>
function 移动(){
document.getElementById("块").className="动1"
}
</script>
</head>
<body>
<input type="button" onclick="移动()" value="移动" />
<div id="块">你点移动,看我动不动</div>
</body>
</html>
<!--写的比较粗糙。正常运行无bug。不过需要等待动画完成再点击btn,不然就出bug。希望能帮到你--><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{width:300pxheight: 300pxbackground:rgba(200,200,200,.5)position: absoluteleft: 0top: 50pxdisplay: none}
.show{display: block}
</style>
</head>
<body>
<div class="box"></div>
<button>点击</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//点击触发
$('button').on('click',function(){
//初始化
if($('.box').css('opacity') ==0){
$('.box').removeClass('show').css({'left':'0','opacity':1})
console.log(1)
}
console.log($('.box').css('opacity'))
$(".box").addClass('show').animate({'left':'300px'},2000).delay(1000).animate({'left':'600px','opacity':0},2000)
})
})
</script>
</body>
</html>