html：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>砸金蛋</title>
<link href="css/demo5.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo5.js"></script>
</head>
<body>
<div id="eggs">
<div class="egg" data-isbreak="false"></div>
<div class="egg" data-isbreak="false"></div>
<div class="egg" data-isbreak="false"></div>
<div class="egg" data-isbreak="false"></div>
</div>
<div id="t"></div>
<audio src="file/1.mp3" id="a1"></audio>
<audio src="file/2.mp3" id="a2"></audio>
<audio src="file/3.mp3" id="a3"></audio>
</body>
</html>
css:
.egg {
width: 158px;
height: 187px;
background-image: url("../img/egg_1.png");
float: left;
margin-right: 30px;
cursor:pointer;
}
#eggs {
height: 187px;
width: 780px;
position:absolute;
top:200px;
left:100px;
}
body {
padding: 0px;
margin: 0px;
}
#t {
width:74px;
height:87px;
background-image:url("../img/egg_3.png");
position:absolute;
left:212px;
top:173px;
cursor:pointer;
}
js:
/// <reference path="jquery-1.10.2.min.js" />
$(function () {
var iNum = Math.floor(Math.random() * 4 + 1);//获取到1~4之间的随机整数
var icount = 0;
$(".egg").mouseover(function () {//鼠标移到蛋上之后
var left = $(this).offset().left + 110;//获取到当前鼠标放上去的蛋的left+蛋和锤子之间的间距=锤子距离浏览器的left
$("#t").css("left", left);
});
$(".egg").click(function () {
if (icount == 4) {//蛋砸完了
document.getElementById("a3").play();
return;
}
if ($(this).attr("data-isbreak") == "false") {
icount++;
$(this).css("background-image", "url(img/egg_2.png)");
var i = $(this).index() + 1;//获取到当前点击的蛋是第几个蛋
if (i == iNum) {//中奖
document.getElementById("a2").play();
}
else {//没有中奖
document.getElementById("a1").play();
}
$(this).attr("data-isbreak", "true");
}
});
});