jquery实现砸金蛋效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现砸金蛋效果代码,可通过ajax后台获取奖品
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .egg { width: 660px; height: 400px; margin: 50px auto 20px auto; } .egg ul li { z-index: 999; } .egg_list { padding-top: 110px; position: relative; width: 660px; list-style: none; } .egg_list li { float: left; background: url(//repo.bfw.wiki/bfwrepo/image/60e0e5c17461a.png) no-repeat bottom; width: 158px; height: 187px; cursor: pointer; position: relative; margin-left: 35px; } .egg_list li span { position: absolute; width: 30px; height: 60px; left: 68px; top: 64px; color: #ff0; font-size: 42px; font-weight: bold } .egg_list li.current { background: url(//repo.bfw.wiki/bfwrepo/image/60e0e5e1a5a15.png) no-repeat bottom; cursor: default; z-index: 300; } .egg_list li.current sup { position: absolute; background: url(//repo.bfw.wiki/bfwrepo/image/60e0e68dc3088.png) no-repeat; width: 232px; height: 181px; top: -36px; left: -34px; z-index: 800; } .hammer { background: url(//repo.bfw.wiki/bfwrepo/image/60e0e5a83f49b.png) no-repeat; width: 74px; height: 87px; position: absolute; text-indent: -9999px; z-index: 150; left: 208px; top: 70px; } .result_tip { position: absolute; background: #ffc; width: 148px; padding: 6px; z-index: 500; top: 200px; left: 10px; color: #f60; text-align: center; overflow: hidden; display: none; z-index: 500; } .result_tip b { font-size: 14px; line-height: 24px; } </style> </head> <body> <div class="container"> <div class="demo"> <div class="egg"> <ul class="egg_list"> <p class="hammer" id="hammer"> 锤子 </p> <p class="result_tip" id="result_tip"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0