jQuery移動端大轉盤抽獎代碼



103 408 137



特效描述:jQuery移動端 大轉盤抽獎代碼,jQuery移動端大轉盤抽獎代碼

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

3. HTML代碼

<div class="rotate_wrap">
	<img class="bg_img rotate_origin" id="i_bg" src="images/img1.png">
	<img class="cont_img rotate_origin1" id="i_cont" src="images/img2.png">
</div>
<div class="btn" id="i_btn">開始</div>
<div class="btn1" id="i_back">退出</div>
<div class="overfloat" id="i_close_cont">
	<div class="overfloat_cont">
		<strong class="top_space">提交成功</strong>
		<div><span id="i_time" class="font_red">5s</span> 后自動返回微信。</div>
		<div id="i_close" class="btn">立即返回</div>
	</div>
</div>
<script type="text/javascript">
	// 轉盤樣式,a:旋轉角度,p:概率(1代表100%),t:需要顯示的其它信息(文案or分享)
	var result_angle = [{a:0,p:0.1,t:'桃花朵朵開^_^'},{a:45,p:0.1,t:'哎呦,不錯哦^_^'},{a:90,p:0.1,t:'天天開心呢^_^'},{a:135,p:0.3,t:'給姐笑一個^_^'},{a:180,p:0.1,t:'今天天氣不錯^_^'},{a:225,p:0.1,t:'心情大好哈哈^_^'},{a:270,p:0.1,t:'中獎五百萬^_^'},{a:315,p:0.1,t:'打架你贏了^_^'}];
	var rotate = {
		rotate_angle : 0, //起始位置為0
		flag_click : true, //轉盤轉動過程中不可再次觸發
		calculate_result:function(type,during_time){//type:0,箭頭轉動,1,背景轉動;during_time:持續時間(s)
			var self = this;
			type = type || 0; // 默認為箭頭轉動
			during_time = during_time || 1; // 默認為1s
			var rand_num = Math.ceil(Math.random() * 100); // 用來判斷的隨機數,1-100
			var result_index; // 最終要旋轉到哪一塊,對應result_angle的下標
			var start_pos = end_pos = 0; // 判斷的角度值起始位置和結束位置
			for(var i in result_angle){
				start_pos = end_pos + 1; // 區塊的起始值
				end_pos = end_pos + 100 * result_angle[i].p; // 區塊的結束值
				if(rand_num >= start_pos && rand_num <= end_pos){ // 如果隨機數落在當前區塊,那么獲取到最終要旋轉到哪一塊
					result_index = i;
					break;
				}
			}
			var rand_circle = Math.ceil(Math.random() * 2) + 1; // 附加多轉幾圈,2-3
			self.flag_click = false; // 旋轉結束前,不允許再次觸發
			if(type == 1){ // 轉動盤子
				self.rotate_angle =  self.rotate_angle - rand_circle * 360 - result_angle[result_index].a - self.rotate_angle % 360;
				$('#i_bg').css({
					'transform': 'rotate('+self.rotate_angle+'deg)',
					'-ms-transform': 'rotate('+self.rotate_angle+'deg)',
					'-webkit-transform': 'rotate('+self.rotate_angle+'deg)',
					'-moz-transform': 'rotate('+self.rotate_angle+'deg)',
					'-o-transform': 'rotate('+self.rotate_angle+'deg)',
					'transition': 'transform ease-out '+during_time+'s',
					'-moz-transition': '-moz-transform ease-out '+during_time+'s',
					'-webkit-transition': '-webkit-transform ease-out '+during_time+'s',
					'-o-transition': '-o-transform ease-out '+during_time+'s'
				});
			}else{ // 轉動指針
				self.rotate_angle = self.rotate_angle + rand_circle * 360 + result_angle[result_index].a - self.rotate_angle % 360;
				$('#i_cont').css({
					'transform': 'rotate('+self.rotate_angle+'deg)',
					'-ms-transform': 'rotate('+self.rotate_angle+'deg)',
					'-webkit-transform': 'rotate('+self.rotate_angle+'deg)',
					'-moz-transform': 'rotate('+self.rotate_angle+'deg)',
					'-o-transform': 'rotate('+self.rotate_angle+'deg)',
					'transition': 'transform ease-out '+during_time+'s',
					'-moz-transition': '-moz-transform ease-out '+during_time+'s',
					'-webkit-transition': '-webkit-transform ease-out '+during_time+'s',
					'-o-transition': '-o-transform ease-out '+during_time+'s'
				});
			}
			// 旋轉結束后,允許再次觸發
			setTimeout(function(){ 
				self.flag_click = true;
				// 告訴結果
				alert(result_angle[result_index].t);
			},during_time*1000);
		}
	}
	$(document).ready(function(){
		$('#i_btn').click(function(){
			if(rotate.flag_click){ // 旋轉結束前,不允許再次觸發
				rotate.calculate_result(1,1);
			}
		});
		var t=5;//5秒后返回微信
		function f_t(){		
			setTimeout(function(){
				t--;
				$("#i_time").html(t+"s");
				f_t();
			},1000)
		}
		$('#i_back').click(function(){
			$("#i_close_cont").show();
			f_t();
		});
		$('#i_close').click(function(){
			$("#i_close_cont").hide();
		});
	});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 旋轉翻轉 旋轉 翻轉 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子