|
|
@@ -0,0 +1,326 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <title>抽奖</title>
|
|
|
+ <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .background {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .pool {
|
|
|
+ position: absolute;
|
|
|
+ width: 84%;
|
|
|
+ height: auto;
|
|
|
+ left: 7%;
|
|
|
+ top: 250px;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+ position: absolute;
|
|
|
+ width: 76%;
|
|
|
+ height: 90%;
|
|
|
+ left: 11%;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ border-radius: 18px;
|
|
|
+ width: 32%;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ box-shadow : 0 0 0 2px aqua;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ color: #470C82;
|
|
|
+ position: absolute;
|
|
|
+ width: 90%;
|
|
|
+ left: 5%;
|
|
|
+ }
|
|
|
+ .mask{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .result{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+ .result_failed_button{
|
|
|
+ position: absolute;
|
|
|
+ left: 24%;
|
|
|
+ width: 52%;
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
+ .result_failed_text{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 13;
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .result_success_title{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 12;
|
|
|
+ color: orange;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .result_success_logo{
|
|
|
+ position: absolute;
|
|
|
+ width: 30%;
|
|
|
+ left: 35%;
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ position: absolute;
|
|
|
+ left: 24%;
|
|
|
+ width: 45%;
|
|
|
+ z-index: 12;
|
|
|
+ height: 40px;
|
|
|
+ border: orange solid 3px;
|
|
|
+ border-radius: 40px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .result_success_button{
|
|
|
+ position: absolute;
|
|
|
+ left: 24%;
|
|
|
+ width: 52%;
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*滚动*/
|
|
|
+ .case {
|
|
|
+ position: absolute;
|
|
|
+ width: 95%;
|
|
|
+ left: 5%;
|
|
|
+ height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .case .part2 {
|
|
|
+ float: left;
|
|
|
+ width: 93%;
|
|
|
+ height: 70px;
|
|
|
+ text-indent: 1em;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ #part2 ul {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ #part2 ul li {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: white;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script type="text/javascript">
|
|
|
+ var current = 0;
|
|
|
+ var last = 0;
|
|
|
+ var threshold = 0;
|
|
|
+ var speed = 1;
|
|
|
+ var enable = true;
|
|
|
+ $(function () {
|
|
|
+ //进入和窗口缩放时重新设置内容位置
|
|
|
+ setPosition();
|
|
|
+ $(window).resize(function () {
|
|
|
+ setPosition();
|
|
|
+ });
|
|
|
+ //点击抽奖
|
|
|
+ $(".button").click(function () {
|
|
|
+ if(enable == true){
|
|
|
+ alert("抽奖开始");
|
|
|
+ //进入不可点击状态
|
|
|
+ enable = false;
|
|
|
+ //设置初始速度
|
|
|
+ speed = 60;
|
|
|
+ //设置要中奖的位置
|
|
|
+ threshold = 7;
|
|
|
+ //配置移动次数
|
|
|
+ last = 56 + threshold - current;
|
|
|
+ setTimeout(function(){next(current)}, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //谢谢惠顾后点击的按钮
|
|
|
+ $(".result_failed_button").click(function () {
|
|
|
+ alert("点击了再玩一次");
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ //重新设置内容位置
|
|
|
+ function setPosition() {
|
|
|
+ $(".pool").css("top", $(document).width() / 1.9);
|
|
|
+ $(".container").css("top", $(document).width() / 1.75).css("height", $(document).width() / 1.6);
|
|
|
+ $(".item").css("height", $(".container").width() / 3.9);
|
|
|
+ $(".title").css("top", $(".container").width() * 2.35);
|
|
|
+ $(".tips").css("top", $(".container").width() * 2.45);
|
|
|
+ $(".mask").css("height", $(document).height());
|
|
|
+ $(".result_failed_button").css("top", $(".container").width() * 1.6);
|
|
|
+ $(".result_success_title").css("top", $(".container").width() * 0.66);
|
|
|
+ $(".result_success_logo").css("top", $(".container").width() * 0.9);
|
|
|
+ $(".result_success_name").css("top", $(".container").width() * 1.35);
|
|
|
+ $(".result_success_phone").css("top", $(".container").width() * 1.59);
|
|
|
+ $(".result_success_button").css("top", $(".container").width() * 1.82);
|
|
|
+ $(".case").css("top", $(".container").width() * 1.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ //激活移动
|
|
|
+ function next() {
|
|
|
+ $(".item" + current).removeClass("active");
|
|
|
+ $(".item" + (current + 1) % 8).addClass("active");
|
|
|
+ current = (current + 1) % 8;
|
|
|
+ //10以下开始减速
|
|
|
+ if(last < 10){
|
|
|
+ speed += 60;
|
|
|
+ }
|
|
|
+ //剩余次数8以下并且到了号时
|
|
|
+ if(!(last-- < 8 && current == threshold)){
|
|
|
+ setTimeout(function(){next()}, speed);
|
|
|
+ }else{
|
|
|
+ setTimeout(function(){
|
|
|
+ alert("抽奖完毕，抽到了" + threshold + "号");
|
|
|
+ enable = true;
|
|
|
+ }, 1500);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //中奖之后
|
|
|
+ function success(){
|
|
|
+ $(".mask").show();
|
|
|
+ $(".success").show();
|
|
|
+ $(".result_success_title").show();
|
|
|
+ $(".result_success_logo").show();
|
|
|
+ $(".result_success_name").show();
|
|
|
+ $(".result_success_phone").show();
|
|
|
+ $(".result_success_button").show();
|
|
|
+ }
|
|
|
+
|
|
|
+ //谢谢惠顾
|
|
|
+ function failed(){
|
|
|
+ $(".mask").show();
|
|
|
+ $(".failed").show();
|
|
|
+ $(".result_failed_button").show();
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <img class="background" src="images/lottery_background.png">
|
|
|
+ <img class="pool" src="images/lottery_pool.png">
|
|
|
+ <div class="container">
|
|
|
+ <img class="item item0 active" src="images/reward_book.png">
|
|
|
+ <img class="item item1" src="images/reward_soap.png">
|
|
|
+ <img class="item item2" src="images/reward_oil10.png">
|
|
|
+ <img class="item item7" src="images/reward_oil5.png">
|
|
|
+ <img class="item button" src="images/lottery_button.png">
|
|
|
+ <img class="item item3" src="images/reward_oil5.png">
|
|
|
+ <img class="item item6" src="images/reward_oil60.png">
|
|
|
+ <img class="item item5" src="images/reward_soap.png">
|
|
|
+ <img class="item item4" src="images/reward_null.png">
|
|
|
+ </div>
|
|
|
+ <span class="title"><span style="color: #FF356B">活动</span>说明</span>
|
|
|
+ <span class="tips">1.中奖者留下姓名和电话，在活动结束后会联系邮寄奖品；<br>
|
|
|
+ 2.微博参与抽奖方式：<br>
|
|
|
+ 关注@贝蒂斯橄榄油官方微博，转发或评论置顶微博并上传“游戏结果海报”。
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="case">
|
|
|
+ <div class="part2" id="part2">
|
|
|
+ <div id="scroll1">
|
|
|
+ <ul>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ <li>恭喜XXXX获得YYYY</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div id="scroll2"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ var PartArea = document.getElementById('part2');
|
|
|
+ var Scroll1 = document.getElementById('scroll1');
|
|
|
+ var Scroll2 = document.getElementById('scroll2');
|
|
|
+
|
|
|
+ Scroll2.innerHTML = Scroll1.innerHTML;
|
|
|
+
|
|
|
+ function roll() {
|
|
|
+ if(Scroll2.offsetHeight - PartArea.scrollTop <= 0) {
|
|
|
+ PartArea.scrollTop -= Scroll1.offsetHeight;
|
|
|
+ } else {
|
|
|
+ PartArea.scrollTop++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var StopRoll = setInterval(roll, 60);
|
|
|
+
|
|
|
+ PartArea.onmouseover = function () {
|
|
|
+ clearInterval(StopRoll);
|
|
|
+ }
|
|
|
+ PartArea.onmouseout = function () {
|
|
|
+ StopRoll = setInterval(roll, 60);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <div class="mask" style="display: none;"></div>
|
|
|
+ <img class="result success" src="images/result_success.png" style="display: none;">
|
|
|
+ <p class="result_success_title" style="display: none;">输入个人信息进行领奖</p>
|
|
|
+ <img class="result_success_logo" src="images/reward_oil10_2.png" style="display: none;">
|
|
|
+ <input class="result_success_name" type="text" placeholder="姓名" style="display: none;">
|
|
|
+ <input class="result_success_phone" type="text" placeholder="手机号" style="display: none;">
|
|
|
+ <img class="result_success_button" src="images/result_success_button.png" style="display: none;">
|
|
|
+
|
|
|
+ <img class="result failed" src="images/result_failed.png" style="display: none;">
|
|
|
+ <img class="result_failed_button" src="images/result_failed_button.png" style="display: none;">
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
Reiskuchen
