【效果如图：】三个色块在页面加载时，从3个不同方向飞入到指定的位置。
| 【实现方法：】
|
【代码如下：】，完整拷过去即可预览。
<!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>animate动画载入滑动</title>
<style>
*{ margin:0px; padding:0px; font-size:12px;}
ul,li{ list-style:none;}
.box,.box2,.box3{ display:none; position:absolute; width:200px; height:200px; text-align:center; color:#fff; line-height:200px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:24px;}
.box{ top:-200px; left:-200px; background:#F99; }
.box2{ top:200px; left:300px; background:#F39;}
.box3{ top:-200px; left:800px; background:#F03;}
</style>
<script src="http://www.resunnet.com/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".box").animate({
top: "0px",
left: "0px",
opacity: 'show'
}, 800 );
$(".box2").animate({
top: "0px",
left: "300px",
opacity: 'show'
}, 800 );
$(".box3").animate({
top: "0px",
left: "600px",
opacity: 'show'
}, 800 );
$(".box,.box2,.box3").hover(
function () {
$(this).animate({
width:"300px",
height:"200px"
}, 720 );
},
function () {
$(this).animate({
width:"200px",
height:"200px"
}, 920 );
}
);
})
</script>
</head>
<body>
<div style=" margin:200px auto; width:800px; height:200px; position:relative; background:#F0F0F0">
<div class="box">CHAI</div>
<div class="box2">LOVE</div>
<div class="box3">GAO</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
