您的位置：首页 > Web前端 > JavaScript

js实现跑动动态的效果

2013-05-22 17:43 309 查看
<script type="text/javascript" src="jquery.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>

<br />

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航