【JS】抽獎大轉盤，點選彈出抽獎效果
阿新 • • 發佈：2019-02-04
抽獎大轉盤，點選彈出抽獎效果
<!--抽獎點選彈出框--> <div id="dzp" class="dzp" > <div class="rotary"> <div class="rotaryArrow" id="rotaryArrow"></div> <div class="list"> <ul class ="scroll"> <li>使用者1569****851抽中<span class="font-red">iphone7</span></li> <li>使用者1515****206抽中<span class="font-red">原始股</span></li> <li>使用者1550****789抽中<span class="font-red">iphone7</span></li> <li>使用者1370****627抽中<span class="font-red">原始股</span></li> <li>使用者1828****215抽中<span class="font-red">原始股</span></li> <li>使用者1589****572抽中<span class="font-red">原始股</span></li> <li>使用者1583****825抽中<span class="font-red">iphone7</span></li> <li>使用者1396****805抽中<span class="font-red">原始股</span></li> <li>使用者1332****261抽中<span class="font-red">iphone7</span></li> <li>使用者1884****863抽中<span class="font-red">原始股</span></li> <li>使用者1384****955抽中<span class="font-red">原始股</span></li> <li>使用者1897****137抽中<span class="font-red">原始股</span></li> <li>使用者1342****973抽中<span class="font-red">原始股</span></li> <li>使用者1558****071抽中<span class="font-red">原始股</span></li> <li>使用者1554****168抽中<span class="font-red">原始股</span></li> <li>使用者1562****018抽中<span class="font-red">原始股</span></li> <li>使用者1805****856抽中<span class="font-red">iphone7</span></li> <li>使用者1354****809抽中<span class="font-red">原始股</span></li> <li>使用者1383****364抽中<span class="font-red">原始股</span></li> </ul> </div> <div class="close"> <a href="javascript:" onclick="CheckForm()" title="關閉">關閉</a> </div> <!-- 彈窗 --> <div class="bd_wd" id="tcwindows"> <div class="tcwindows"> <form id="frm4" method="post" name="Form4" action="/plus/diy.php" onSubmit="return myCheck(this);" method="post"> <input type="hidden" name="action" value="post"> <input type="hidden" name="diyid" value="3"> <input type="hidden" name="do" value="2"> <p style="font-family:SimHei;font-weight: bold;font-size: 18px;margin-top:8px;margin-bottom: 8px;">聯絡資訊</p> <div class="close"><a href="javascript:" onclick="closeTCW()" title="關閉">關閉</a></div> <p class="hongbao_input"> <input name="name" class="uname" id="name" placeholder="請輸入您的姓名" type="text" data-errot="請輸入正確姓名" style="width:294px;margin-bottom: 8px;"> </p> <p class="hongbao_input"> <input name="tel" class="uphone" id="tel" type="text" placeholder="請填寫您的手機號碼" data-errot="請輸入正確手機號碼" style="width:294px;margin-bottom: 8px;"> </p> <p> <input name="timesj" value="" type="hidden" id="timesj" class="intxt"> <script type="text/javascript"> window.onload = function(){ var nowDate = new Date(); var str = nowDate.getFullYear()+"-"+(nowDate.getMonth() + 1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds(); document.getElementById("timesj").value=str; } </script> </p> <p><input name="note" value="未溝通" type="hidden" id="note" class="intxt"></p> <p> <input type="hidden" name="dede_fields" value="name,text;tel,text;timesj,text;note,text" /> <input type="hidden" name="dede_fieldshash" value="0551adfecbd9d2a6dfd7ca8273738941" /> <input class="input_simit" name="Button" type="submit" value="提 交" /> </p> </form> </div> </div> </div> </div> <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.rotate.min.js"></script> <script type="text/javascript"> $(function(){ var nowDate = new Date(); var str = nowDate.getFullYear()+"-"+(nowDate.getMonth() + 1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds(); document.getElementById("timesj").value=str; }); //彈出抽獎框 function dzp(){ var div=document.getElementById("dzp"); div.style.display="block"; } //關閉抽獎框 function CheckForm(){ var div=document.getElementById("dzp"); div.style.display="none"; } //輪播抽獎結果 function autoScroll(obj){ $(obj).find(".scroll").animate({ marginTop : "-37px" },500,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }) } $(function(){ setInterval('autoScroll(".list")',1200); }) // function closeTCW(){ var div=document.getElementById("tcwindows"); div.style.display="none"; } //獲取抽獎結果 var num=0; $(function(){ $("#rotaryArrow").click(function(){ lottery(); }); }); function lottery(){ $.ajax({ type: 'POST', url: '{dede:global.cfg_templets_skin/}/other/dzp.php', dataType: 'json', cache: false, error: function(){ alert('出錯了！'); return false; }, success:function(json){ $("#rotaryArrow").unbind('click').css("cursor","default"); var id = json.id; //id var a = json.angle; //角度 var p = json.prize; //獎項 $("#rotaryArrow").rotate({ duration:3000, //轉動時間 angle: 0, animateTo:1800+a, //轉動角度 easing: $.easing.easeOutSine, callback: function(){ num++; if(id == 2){ var con = confirm('恭喜你，中得'+p+'\n還要再來一次嗎？\n\n（溫馨提示：每個使用者有三次抽獎，祝您好運！）\n該活動的解釋權在法律規定的範圍內歸本公司所有。'); }else{ var con1 = confirm('恭喜你，中得'+p+'！\n請填寫您的個人資訊，以便我們聯絡您領獎！\n\n（溫馨提示：每個使用者最多隻能中獎一次，抽取多次中獎者，將取消領獎資格！）\n該活動的解釋權在法律規定的範圍內歸本公司所有。'); if(con1){ $("#tcwindows").css("display", "block"); } } if(con && num<3){ lottery(); }else if(con && num>=3){ alert("您今天的抽獎已達上限，請明天再試！"); return false; }else{ return false; } } }); } }); } </script>
css效果：
/* 大轉盤效果CSS開始 */ .dzp{width:900px; display:none; position:fixed;margin:18%;top:-150px; z-index:1;} .rotary{margin:auto 0; width:854px; height:504px; position:relative; background: url(../images/bg1.png);} .rotary .rotaryArrow{position:absolute;left:145px;top:128px;width:251px;height:251px;cursor:pointer;background-image:url(../images/arrow.png);} .rotary .list{position:absolute;right:-45px;top:144px;width:300px;height:320px;overflow:hidden;} .rotary .list li{height:37px;font:14px/37px "Microsoft Yahei";color:#fff;text-indent:25px;background:url(../images/user.png) 0 no-repeat;} .rotary .list li .font-red{color:#FC0203;} .rotary .close{position:absolute;right:22px;top:50px;width:24px;height:24px;text-indent:-100px;} .rotary .close a{position:absolute;right:0px;top:0px;width:24px;height:24px;text-indent:-100px;background-image:url(../images/close.png);overflow:hidden;} .rotary .bd_wd{display:none;position:absolute;left:100px;top:100px;width:400px;height:200px;background-color:#fff;filter:alpha(opacity=90);} .rotary .bd_wd .tcwindows{text-align: center;font-family: "微軟雅黑";font-size: 16px;color: #333;} .rotary .bd_wd .close {width: 25px;height: 25px;position: absolute;top: -5px; right: 5px; z-index: 100;} .rotary .bd_wd .close a {width: 25px;height: 25px; text-indent: -100em; background: url("../images/close.png") no-repeat;} .rotary .bd_wd .uname {width: 224px; height: 55px;border: 2px solid #cd0e1b;border-radius: 5px;padding-left: 10px;margin: auto 0;line-height: 55px; display: inline-block;} .rotary .bd_wd .uphone {width: 224px;height: 55px;border: 2px solid #cd0e1b;border-radius: 5px;padding-left: 10px; line-height: 55px;display: inline-block;} .rotary .bd_wd .ucodebtn { width: 104px;height: 55px; border: 2px solid #cd0e1b;border-radius: 5px;line-height: 55px;display: inline-block;text-indent: 0.5em; line-height: 55px;cursor:auto;color: #cd0e1b;} .rotary .bd_wd .input_simit {width: 224px;height: 55px; border-radius: 5px; background:#d71f2e; margin-top: 10px;margin-left:10px;font-size: 16px;color: #fff;} .rotary .bd_wd .input_simit:hover {background:rgba(0,0,0,0.75);;} .rotary .tcwindows1{display:none; width:500px; height:500px; position:absolute;left:6px;top:2px; background: url(../images/win.png);} .rotary .tcwindows1 .win a{width:328px; height:58px; position:absolute;left:88px;top:325px;} .rotary .tcwindows2{display:none; width:500px; height:500px; position:absolute;left:6px;top:2px; background: url(../imagestwin.png);} /* 效果CSS結束 */