html5 砸金蛋示例源码

基本信息

源码名称：html5 砸金蛋示例源码

源码大小：2.41M

文件格式：.zip

开发语言：CSS

更新时间：2017-12-20

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

实现h5砸金蛋效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div>
    <div class="click-egg">
        <!--dan 1-->
        <a class="jd jd-1 btn1" href="javascript:">
            <div class="jd-per">&nbsp;</div>
        </a>
        <!--dan 2-->
        <a class="jd jd-2 btn2" href="javascript:"><div class="jd-per">&nbsp;</div></a>
        <!--dan 3-->
        <a class="jd jd-3 btn3" href="javascript:"><div class="jd-per">&nbsp;</div></a>
    </div>
    <div class="click-egg">
        <!--dan 1-->
        <a class="jd jd-1 btn1" href="javascript:">
            <div class="jd-per">&nbsp;</div>
        </a>
        <!--dan 2-->
        <a class="jd jd-2 btn2" href="javascript:"><div class="jd-per">&nbsp;</div></a>
        <!--dan 3-->
        <a class="jd jd-3 btn3" href="javascript:"><div class="jd-per">&nbsp;</div></a>
    </div>
    <div class="cz" id="js-cz" style="display:none;"><!--开砸状态添加样式 zjd--></div>
</div>
<script>
    $(document).ready(function() {
        popups($(".btn1"),$(".pop_box1"));
        popups($(".btn2"),$(".pop_box2"));
        popups($(".btn3"),$(".pop_box3"));
        popups($(".btn4"),$(".pop_box4"));
    });
    /***弹出框**/
    function popups(btn,nowing) {
        btn.click(function(event) {
            $("#popups").show();
            nowing.slideDown();
        });
        $(".b_close").click(function(event) {
            $("#popups").hide();
            nowing.hide();
            $(".click-egg  a").addClass("jd").removeClass("eggover")
        });
    }


    $(function(){
        $(".click-egg").mouseover(function(){
            $("#js-cz").show();
        }).mousemove(function(e){
            $("#js-cz").css({
                left:e.pageX 2,
                top:e.pageY 2
            });
            $("#js-cz").addClass("zjd");
        }).mouseout(function(e){
            $("#js-cz").hide();
            $("#js-cz").removeClass("zjd");
        })
        $(".click-egg  a").click(
            function(){
                $(this).removeClass("jd").addClass("eggover")
            }

        )
    })






</script>

</body>
</html>