jQuery JSON九宫格转盘特效代码下载


jQuery JSON九宫格转盘特效代码下载
jQuery JSON九宫格转盘特效代码下载以及九宫格转盘等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/encryption-win.js"></script>

2. HTML代码

<center><h3>加载外部json数据文件,请在服务端查看效果</h3></center>
<div class="luckyDraw">
    <ul class="lottery">
        <li class="active">华为</li>
        <li class="qw rt">三星</li>
        <li>乐视</li>
        <li>QQ</li>
        <li>苹果</li>
        <li>优惠券</li>
        <li>谢谢参与</li>
        <li>特等奖</li>
        <li id="me">点击</li>
    </ul>
    <span class="prize">其它</span>
</div>
<script type="text/javascript">
$(function () {
	document.querySelector('#me').addEventListener('click', function () {
		$.ajax({
			url: './winData.json',
			method: 'get',
			success: function (data) {
				new Win({
					el: '.lottery', //抽奖元素的父级
					startIndex: 1, //从第几个位置开始抽奖 [默认为零]
					totalCount: 4, //一共要转的圈数
					// winningIndex: data.win, //中奖的位置索引[1-8] 后台返回的中奖数字
					winningIndex: 3, //模拟写死的,实际效果可接受后台返回
					speed: 50 //抽奖动画的速度 [数字越大越慢,默认100]
				}, function () {  //中奖后的回调函数
					//do something
					$('.lottery li').each(function () {
						if ($(this).hasClass('active')) {
							//打印当前中奖信息
							console.log($(this).html());
							$('.prize').html($(this).html());
						}
					});
				});
			}
		});
	})
});//end function
</script>
<div style="text-align:center;margin:280px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章