大转盘游戏

最新推荐文章于 2024-06-22 21:19:29 发布

青柠Q

最新推荐文章于 2024-06-22 21:19:29 发布

阅读量552

点赞数

本文链接：https://blog.csdn.net/LiuHanQingIT/article/details/77164486

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.pointer{
position: absolute;
top: 90px;
left: 138px;
z-index: 2;
}
</style>
</head>
<body>
<div class="pointer"><img src="img/pointer.png" alt="pointer"/></div>
<img src="img/turntable2.png" id="img" /><br />
文字<input type="text" id="txt" /><br /><br />
<input type="button" value="旋转" οnclick="f_play($('#txt').val())" />
<input type="button" value="恢复" οnclick="f_stop($('#txt').val())" />

<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// var model = { "1": -332, "2": -280, "3": -228, "4": -180 , "5":-130 , "6": -80 , "7": -26 };
var model = { "七": -332, "夕": -280, "浪": -228, "漫": -180 , "价":-130 , "给": -80 , "你": -26 };
function f_play(v) {
$("#img").css("transition", " All 3s ease").css("transform", "rotate(" + (model[v] - ((Math.random() * 10).toFixed(0) * 360)) + "deg)");
setTimeout(function(){alert("恭喜抽中【"+v+"】");},3000);
}
function f_stop() {
$("#img").css("transition", " All 0s ease-in-out").css("transform", "rotate(0deg)");
}
</script>
</body>
</html>