<!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>5元 和 币模仿地球引力坠落效果</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="lanrenzhijia">
<div class="block_container">
<div class="handle_wrap">
<div class="handle"></div>
</div>
<div class="block"></div>
</div>
<div class="block_container">
<div class="handle_wrap">
<div class="handle"></div>
</div>
<div class="block"></div>
</div>
<div class="block_container">
<div class="handle_wrap">
<div class="handle"></div>
</div>
<div class="block"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/lanrenzhijia.js"></script>
</body>
</html>
以下是lanrenzhijia.css
@charset "utf-8";
* {margin:0;padding:0;list-style:none;}
img {border:none;}
body { font-size:12px;}
#lanrenzhijia {
height:550px;
background: #B4D7F4;
width:480px;
margin:0 auto;
padding:20px;
}
.block {
width:128px;
height:128px;
background:url(../images/football.png) no-repeat;
}
.block_container {
float: left;
width: 128px;
margin-left:30px;
}
.handle_wrap {
height: 50px;
}
.handle {
width: 4px;
height: 50px;
background:#ff0000;
cursor: pointer;
margin-left: 62px;
}
以下是lanrenzhijia.js代码内容
/*代码整理：凉山 东东 （以下代码直接复制以lanrenzhijia.js命名就行）*/
var Gravity = {
init: function() {
$("#lanrenzhijia .block_container").css({
height: $("#lanrenzhijia").outerHeight() + "px"
});
$(".handle").mouseenter(function(i) {
//animate the cutting of the string
$(this).animate({
height: "20px"
}, {
duration: 1500,
easing: "easeOutElastic"
});
var block = $(this).parent().next();
var yposBlock = $(block).position()['top'] - $("#lanrenzhijia").position()['top'];
var fallDist = ($("#lanrenzhijia").outerHeight() - yposBlock) - $(block).outerHeight();
//let the block fall
$(block).stop().animate({
marginTop: fallDist+"px"
}, {
duration: 1000,
easing: "easeOutBounce"
});
});
},
reset: function() {
$(".handle").stop().animate({
height: "50px"
},{
duration: 1000,
easing: "easeInElastic"
});
$(".block").stop().animate({
marginTop: "0px"
},{
duration: 1000,
easing: "easeInBounce"
});
}
}
$(document).ready(function(){
Gravity.init();
});
/* 代码整理：凉山东东 */