您的位置：首页 > 其它

刮刮奖 --- 可以自定义在图层下添加文字等等信息

2016-07-28 17:53 357 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>刮刮奖</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
.container {
position: relative;
display: inline-block;
width: 533px;
height: 800px;
}

#robot {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-box-shadow: 0px 0px 20px 0px #707070;
-moz-box-shadow: 0px 0px 20px 0px #707070;
box-shadow: 0px 0px 20px 0px #707070;
}

#redux {
position: absolute;
top: 0px;
left: 0px;
z-index: 200000;
}

#progress {
position: absolute;
top: 4px;
right: 4px;
color: black;
pointer-events: none;
z-index: 3;
text-shadow: 0px 0px 2px #FFFFFF;
}
</style>
</head>
<body>
<div class="container">
<img id="robot" src="bg1.jpg" />
<p style="color: red;position: absolute;z-index: 100;">+5</p>
<img id="redux" src="bg2.jpg"/>
<div id="progress">0%</div>
</span>

<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="jquery.eraser.js"></script>
<script type="text/javascript">
$('#redux').eraser({
progressFunction: function(p) {
$('#progress').html(Math.round(p*100)+'%');
}
});
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航