jquery.rotate转盘随机抽奖活动程序插件
2015-01-04 13:30:03  By: dwtedx

本例子是编写的一个红色喜庆jquery抽奖网页、整个抽奖过程都有特效、是一款基于jquery.rotate插件实现的转盘抽奖活动、非常不错、喜欢的哥们可以下载去研究一下、下面是Demo运行效果图

jquery抽奖转盘


jQuery代码

$(function(){
	var $rotaryArrow = $(´#rotaryArrow´);
	var $result = $(´#result´);
	var $resultTxt = $(´#resultTxt´);
	var $resultBtn = $(´#result´);

	$rotaryArrow.click(function(){
	var data = [0, 1, 2, 3, 4, 5, 6, 7];
	data = data[Math.floor(Math.random()*data.length)];
	switch(data){
		case 1: 
			rotateFunc(1,87,´恭喜您获得了 <em>1</em> 元代金券´);
			break;
		case 2: 
			rotateFunc(2,43,´恭喜您获得了 <em>5</em> 元代金券´);
			break;
		case 3: 
			rotateFunc(3,134,´恭喜您获得了 <em>10</em> 元代金券´);
			break;
		case 4: 
			rotateFunc(4,177,´很遗憾,这次您未抽中奖,继续加油吧´);
			break;
		case 5: 
			rotateFunc(5,223,´恭喜您获得了 <em>20</em> 元代金券´);
			break;
		case 6: 
			rotateFunc(6,268,´恭喜您获得了 <em>50</em> 元代金券´);
			break;
		case 7: 
			rotateFunc(7,316,´恭喜您获得了 <em>30</em> 元代金券´);
			break;
		default:
			rotateFunc(0,0,´很遗憾,这次您未抽中奖,继续加油吧´);
	}
	});
	//awards:奖项,angle:奖项对应的角度
	//angle是图片上各奖项对应的角度,1440是让指针固定旋转4圈
	var rotateFunc = function(awards,angle,text){  
		$rotaryArrow.stopRotate();
		$rotaryArrow.rotate({
			angle: 0,
			duration: 5000,
			animateTo: angle   1440,  
			callback: function(){
				$resultTxt.html(text);
				$result.show();
			}
		});
	};

	$resultBtn.click(function(){
		$result.hide();
	});
});


HTML代码

<div class="rotary">
	<div class="rotaryArrow" id="rotaryArrow"></div>
	<div class="list">
		<h3>中奖名单</h3>
		<ul>
			<li>1852****401</li>
			<li>1569****851</li>
			<li>1515****206</li>
			<li>1550****789</li>
			<li>1370****627</li>
			<li>1828****215</li>
			<li>1589****572</li>
			<li>1583****825</li>
			<li>1396****805</li>
			<li>1332****261</li>
			<li>1884****863</li>
			<li>1384****955</li>
			<li>1897****137</li>
			<li>1342****973</li>
			<li>1558****071</li>
			<li>1554****168</li>
			<li>1562****018</li>
			<li>1805****856</li>
			<li>1354****809</li>
			<li>1383****364</li>
		</ul>
	</div>
	<div class="result" id="result">
		<p id="resultTxt"></p>
		<a href="javascript:" id="resultBtn" title="关闭">
		关闭</a>
	</div>
</div>


以上就是实现抽奖的代码、当然你必须引入jQuery和jquery.rotate.min.js、两个库都放到源代码里面了

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1mgxFxGW 密码: a5e9

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+