吃不完的巧克力 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>吃不完的巧克力</title> <style type="text/css"> *{ margin: 0; padding: 0; border: 0; } div{ width: 0; height: 0; } body{ background: #272822; } .ckl{ background: url(http://sandbox.runjs.cn/uploads/rs/296/iehoqtsc/ckl.jpg); overflow: hidden; position: absolute; z-index: 9999; left: 0; top: 0; } .left{ width: 140px; height: 224px; } .zb-r-d{ border: 200px solid #272822; border-left: 400px solid transparent; border-top: 0; border-right: 20px solid transparent; position: absolute; right: -20px; z-index: 10; } #main-content{ width: 175px; height: 280px; margin: 200px auto; position: relative; overflow: visible; } .bg{ width: 175px; height: 280px; left: 0; top: 0; position: absolute; background: url(http://sandbox.runjs.cn/uploads/rs/296/iehoqtsc/bg-ckl.gif) left bottom no-repeat transparent; z-index: 9999; } #to-make{ background: #9f6a4b; font: bold 20px/1.5 '微软雅黑'; width: 120px; color: #fff; position: absolute; top: 450px; left: 50%; margin-left: 100px; cursor: pointer; } </style> </head> <body> <div id="main-content"> <div class="ckl left other" id="redundant" style="width:35px; height:56px; left:0; top:0;"></div> <div class="ckl left other" style="width:70px; height:56px; left:35px; top:0;"></div> <div class="ckl left" style="width:105px; height:200px;left:0;top:56px;"> <div class="zb-r-d" style="top:95px;"></div> </div> <div class="ckl right" style="width:70px; height:150px; left:105px; top:0;"> <div class="zb-r-d" style="top:114px;"></div> </div> <div class="bg"></div> </div> <input type="button" id="to-make" value="再来一块" /> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.moveBy = function(left,top,dur,cbk){ return this.each(function(){ $(this).animate({ left: parseInt( $(this).css('left') ) + ( left | 0 ), top: parseInt( $(this).css('top') ) + ( top | 0 ) }, dur||800 ,cbk); }); }; var all = $('#main-content').html(); function make(){ $('#main-content').html( all ); $('#to-make').attr({disabled:true}); $('.ckl').stop(); $('.left').moveBy( 0, -20, 200, function(){ $('.left>.zb-r-d').moveBy( 0, 19); }).moveBy( 70, -76 ).moveBy( 70,-56, 200); $('.right').moveBy( 0, -240).moveBy( -105, -240 ).moveBy( -105, 56 ,null , function(){ $('.other').moveBy(-105,0).moveBy(-105, 56, 500, function(){ $('#redundant').moveBy(-105,0,function(){ if(!this.ok){ alert('耶！可以吃了.'); this.ok = true; $('#to-make').attr({disabled:false}); } }); }); }); } //make(); $('#to-make').on('click',make); })(jQuery); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 吃不完的巧克力