您的位置：首页 > Web前端 > JavaScript

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

2015-12-22 10:54 711 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航