实现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"> </div> </a> <!--dan 2--> <a class="jd jd-2 btn2" href="javascript:"><div class="jd-per"> </div></a> <!--dan 3--> <a class="jd jd-3 btn3" href="javascript:"><div class="jd-per"> </div></a> </div> <div class="click-egg"> <!--dan 1--> <a class="jd jd-1 btn1" href="javascript:"> <div class="jd-per"> </div> </a> <!--dan 2--> <a class="jd jd-2 btn2" href="javascript:"><div class="jd-per"> </div></a> <!--dan 3--> <a class="jd jd-3 btn3" href="javascript:"><div class="jd-per"> </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>
评论