原生跑马灯抽奖特效，适配移动端

最新推荐文章于 2021-06-10 02:40:35 发布

impossible1994727

最新推荐文章于 2021-06-10 02:40:35 发布

阅读量1k

点赞数

分类专栏： css+js 文章标签：抽奖、跑马灯

本文链接：https://blog.csdn.net/impossible1994727/article/details/84959900

版权

本文介绍了如何在移动端实现原生跑马灯抽奖特效，包括奖品位置的布局策略和速度控制。难点在于奖品的环绕排放和速度的动态调整。通过JS代码示例，详细解析了定时器循环、速度控制以及防止重复抽奖的逻辑，提供了完整的抽奖功能实现代码。此外，还提到了使用rem.js进行响应式布局的设置。

摘要由CSDN通过智能技术生成

图片全部隐私处理

跑马灯抽奖特效难点一：奖品位置排放，如下图

<div class="gift_div">
				<div class="gift gift1">奖品1</div>
				<div class="gift gift2">奖品2</div>
				<div class="gift gift3">奖品3</div>
				<div class="gift gift4">奖品4</div>
				<div class="gift gift5">奖品5</div>
				<div class="gift gift6">奖品6</div>
				<div class="gift gift7">奖品7</div>
				<div class="gift gift8">奖品8</div>
				<div class="start">开始抽奖</div>
			</div>

按照代码常规，奖品1,2,3,4是顺序排列，在这里，使用了定位将他们绕成一个圈。

难点二：速度控制，其实这个没啥，多尝试几个速度就行；

js代码重点就是定时器的循环，代码如下：

$(function() {
	var speed = 150, //跑马灯速度
		click = true, //阻止多次点击
		img_index = -1, //阴影停在当前奖品的序号
		circle = 0, //跑马灯跑了多少次
		maths,//取一个随机数;
		num=$('.red').text();

	$('.start').click(function() {
		if(click&&num>0) {
			click = false;
			maths = parseInt((Math.random() * 10) + 80);
			light();
		} else {
			return false;
		}
	});

	function light() {
		img();
		circle++;
		var timer = setTimeout(light, speed