图层淡入淡出放大和缩小的瞬息移动效果

最新推荐文章于 2024-11-20 20:58:38 发布

转载最新推荐文章于 2024-11-20 20:58:38 发布 · 476 阅读

文章标签：

#function #xhtml #html #class

布局专栏收录该内容

1 篇文章

订阅专栏

<!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=GBK" />
<title>图层淡入淡出放大和缩小的瞬息移动效果</title>
<script type="text/javascript" src="http://www.liehuo.net/uploads/Common/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
</script>
<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 80%/120% Arial, Helvetica, sans-serif;
}
a {
font-weight: bold;
color: #000000;
}
#box {
background: #6699FF;
height: 100px;
width: 100px;
position: relative;
}
</style>
</head>
<body>
<p><a href="#" class="run">开始...</a></p>
<div id="box">
</div>
</body>
</html>
<br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.liehuo.net/' target='_blank'>http://www.liehuo.net/</a></center>