【网络公开课总结】砸蛋中奖效果

首先，4个蛋，一个锤子。都是div。

    <div class="eggs">
        <div class="egg"></div>
        <div class="egg"></div>
        <div class="egg"></div>
        <div class="egg"></div>
    </div>
    <div class="t"></div>

加事件

$(function () {
    var iNum = Math.floor(Math.random() * 4 + 1);//有奖的蛋。产生1~4之间的随机整数
//给锤子加事件
    $(".egg").mouseover(function () {
        var left = $(this).offset().left;//当前鼠标放上去的蛋距离浏览器左边的间距
        $(".t").css("left", left + 123);
    });
//砸蛋
     $(".egg").one("click",function(){
            $(this).addClass("bg");//砸过的蛋，换样式。
            var i = $(this).index() + 1;//获取到当前点击的蛋是第几个蛋
            if (i == iNum) {
                alert("ok");
            }else {
                alert("no");
            }
    });
});

附样式：

* {
    padding: 0px;
    margin: 0px;
}
.egg {
    width: 158px;
    height: 187px;
    background-image: url("../img/egg_1.png");
    float: left;
    margin-right:40px;
    cursor:pointer;
}
.eggs {
    margin-top:200px;
    margin-left:100px;
}
.t {
    width:74px;
    height:87px;
    background-image:url("../img/egg_3.png");
    position:absolute;
    left:225px;
    top:190px;
}
.bg {
    background-image: url("../img/egg_2.png");
}