用javascript做一个动画
想在网页上做出个动画效果，大致是：点击按钮的时候把一个div分成4块相等的区域，然后每个小块向两边各移动80像素然后消失。不知道怎么把一个DIV分成4块，可以用jquer...
想在网页上做出个动画效果，大致是：点击按钮的时候把一个div分成4块相等的区域，然后每个小块向两边各移动80像素然后消失。
不知道怎么把一个DIV分成4块，可以用jquery做移动，哪位帮忙给我思路，感激不尽 展开
不知道怎么把一个DIV分成4块，可以用jquery做移动，哪位帮忙给我思路，感激不尽 展开
展开全部
<html>
<head>
<title></title>
<script type="text/javascript" src="horn.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#control').click(function(){
if($('#control').attr("checked"))
{
$('#div').hide();
$('#div1').animate({
left:"120px",
top:"20px"
},2000 );
$('#div2').animate({
left:"320px",
top:"20px"
},2000 );
$('#div3').animate({
left:"120px",
top:"180px"
},2000 );
$('#div4').animate({
left:"320px",
top:"180px"
},2000 );
}
else
{
$('#div1').animate({
left:"200px",
top:"100px"
},2000);
$('#div2').animate({
left:"250px",
top:"100px"
},2000);
$('#div3').animate({
left:"200px",
top:"150px"
},2000);
$('#div4').animate({
left:"250px",
top:"150px"
},2000,function(){
$('#div').show();
});
}
});
});
</script>
</head>
<body style="position:absolute;">
<input id="control" type="checkbox" />
<div id="div" style = "width:100px;height:100px;background-color:red; position:absolute;left:200px;top:100px;"></div>
<div id="div1" style = "width:50px;height:50px;background-color:red; position:absolute;left:200px; top:100px;"></div>
<div id="div2" style = "width:50px;height:50px;background-color:red; position:absolute;left:250px; top:100px;"></div>
<div id="div3" style = "width:50px;height:50px;background-color:red; position:absolute;left:200px; top:150px;"></div>
<div id="div4" style = "width:50px;height:50px;background-color:red; position:absolute;left:250px; top:150px;"></div>
</body>
</html>
<head>
<title></title>
<script type="text/javascript" src="horn.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#control').click(function(){
if($('#control').attr("checked"))
{
$('#div').hide();
$('#div1').animate({
left:"120px",
top:"20px"
},2000 );
$('#div2').animate({
left:"320px",
top:"20px"
},2000 );
$('#div3').animate({
left:"120px",
top:"180px"
},2000 );
$('#div4').animate({
left:"320px",
top:"180px"
},2000 );
}
else
{
$('#div1').animate({
left:"200px",
top:"100px"
},2000);
$('#div2').animate({
left:"250px",
top:"100px"
},2000);
$('#div3').animate({
left:"200px",
top:"150px"
},2000);
$('#div4').animate({
left:"250px",
top:"150px"
},2000,function(){
$('#div').show();
});
}
});
});
</script>
</head>
<body style="position:absolute;">
<input id="control" type="checkbox" />
<div id="div" style = "width:100px;height:100px;background-color:red; position:absolute;left:200px;top:100px;"></div>
<div id="div1" style = "width:50px;height:50px;background-color:red; position:absolute;left:200px; top:100px;"></div>
<div id="div2" style = "width:50px;height:50px;background-color:red; position:absolute;left:250px; top:100px;"></div>
<div id="div3" style = "width:50px;height:50px;background-color:red; position:absolute;left:200px; top:150px;"></div>
<div id="div4" style = "width:50px;height:50px;background-color:red; position:absolute;left:250px; top:150px;"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一个Div是不能分成4个的，只能点击按钮时生成4个新div覆盖住旧div，然后隐藏旧div，然后移动4个div，这样来模拟。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上说的对，但思路有点弯。我建议你最初的时候就是弄四个div然后算准位置放在一起，然后点一下控制这四个向不同方向移动就行了。这个没啥难的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
点按钮时获取目标div x y位置，高 宽；进行计算四个小div的x y值和大小；然后插入到body。。。然后进行位移。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
