砸金蛋jsp效果--没有后台功能

最新推荐文章于 2018-08-02 09:41:16 发布

sundancer_lilong

最新推荐文章于 2018-08-02 09:41:16 发布

阅读量492

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个砸金蛋游戏的实现细节，通过HTML、CSS和JavaScript技术，展示了如何创建一个互动式的砸金蛋游戏页面。游戏包括多个可以点击的蛋形按钮，点击后会触发动画效果并显示中奖结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>砸金蛋游戏</title>
<c:set var="ctxresources" value="${pageContext.request.contextPath}/manage"/>
<link type="text/css" rel="stylesheet" href="${ctxresources}/css/bootstrap.min.css">
<script src="${ctxresources}/js/jquery.min.js"></script>
<style>
.egg{width:660px; height:400px; margin:50px auto 20px auto;}
.egg ul li{z-index:999;}
.eggList{padding-top:110px;position:relative;width:660px;}
.eggList li{float:left;background:url(${ctxresources}/images/egg1.png) no-repeat bottom;width:158px;
height:187px;cursor:pointer;position:relative;margin-left:35px; background-size:100%; list-style:none;}
.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0;
font-size:42px; font-weight:bold}
.eggList li.curr{background:url(${ctxresources}/images/egg2.png) no-repeat bottom;cursor:default;z-index:300;background-size:100%; list-style:none;}
.eggList li.curr sup{position:absolute;background:url(${ctxresources}/images/body-bg.png) no-repeat;width:232px;
height:181px;top:-36px;left:-34px;z-index:800;}
.hammer{background:url(${ctxresources}/images/zhuizi.png) no-repeat;width:74px;height:87px;position:absolute;
text-indent:-9999px;z-index:150;left:168px;top:100px;background-size:100%;}
.resultTip{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;}
.resultTip b{font-size:14px;line-height:24px;}
</style>
<script>
$(function(){
$(".eggList li").hover(function() {
var posL = $(this).position().left + $(this).width();
$("#hammer").show().css('left', posL);
})
$(".eggList li").click(function() {
$(this).children("span").hide();
eggClick($(this));
});
function eggClick(obj) {
var _this = obj;
_this.unbind('click'); //解除click
$(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185});
$(".hammer").animate({//锤子动画
"top":_this.position().top-25,
"left":_this.position().left+125
},30,function(){
_this.addClass("curr"); //蛋碎效果
_this.find("sup").show(); //金花四溅
$(".hammer").hide();//隐藏锤子
$('.resultTip').css({display:'block',top:'100px',left:_this.position().
left+45,opacity:0})
.animate({top: '50px',opacity:1},300,function(){//中奖结果动画
$("#result").html("中奖结果提示");
//$("#result").html("很遗憾,您没能中奖!");
});
}
);
}

});
</script>
</head>
<body>
<div class="egg">
<ul class="eggList">
<p class="hammer" id="hammer">锤子</p>
<p class="resultTip" id="resultTip"><b id="result"></b></p>
<li><span>1</span><sup></sup></li>
<li><span>2</span><sup></sup></li>
<li><span>3</span><sup></sup></li>
</ul>
</div>
</body>
</html>