下面是详细的jQuery实现适用于移动端的跑马灯抽奖特效的攻略：
1. 准备工作
在实现跑马灯抽奖特效之前，我们需要先准备一些基本的素材，包括CSS样式表和HTML结构。在CSS样式表中，我们一般需要定义一些基本的样式，例如设置背景颜色、边框样式等等。在HTML结构中，我们需要定义一个容器元素和一个跑马灯元素。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现适用于移动端的跑马灯抽奖特效</title>
<style type="text/css">
body {
background-color: #f5f5f5;
}
.container {
width: 300px;
height: 150px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
.marquee {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="marquee"></div>
</div>
</body>
</html>
2. 实现滚动效果
接下来，我们需要使用jQuery库来实现跑马灯的滚动效果。在实现滚动效果之前，我们需要先导入jQuery库。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现适用于移动端的跑马灯抽奖特效</title>
<style type="text/css">
body {
background-color: #f5f5f5;
}
.container {
width: 300px;
height: 150px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
.marquee {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var marquee = $('.marquee');
var container = $('.container');
var clone = marquee.clone();
container.append(clone);//容器中再添加一个marquee元素作为克隆跑马灯
var marqueeWidth = marquee.width();
var containerWidth = container.width();
var speed = 50;//数值越小速度越快
var timer = null;
var start = function() {
var x = container.scrollLeft();
if(x >= marqueeWidth) {
container.scrollLeft(x - marqueeWidth);
} else {
container.scrollLeft(x + 1);
}
};
var stop = function() {
clearInterval(timer);
timer = null;
}
//鼠标进入容器暂停滚动
container.on('mouseenter', function() {
stop();
});
//鼠标离开容器恢复滚动
container.on('mouseleave', function() {
timer = setInterval(start, speed);
});
timer = setInterval(start, speed);//启动滚动效果
});
</script>
</head>
<body>
<div class="container">
<div class="marquee"></div>
</div>
</body>
</html>
3. 实现抽奖效果
最后，我们需要使用jQuery库来实现跑马灯的抽奖效果。在实现跑马灯的抽奖效果之前，我们需要先准备一些中奖数据，例如奖品名称、奖品图片等等。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现适用于移动端的跑马灯抽奖特效</title>
<style type="text/css">
body {
background-color: #f5f5f5;
}
.container {
width: 300px;
height: 150px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
.marquee {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.item {
float: left;
width: 100px;
height: 150px;
text-align: center;
line-height: 150px;
font-size: 20px;
color: #333;
}
.item img {
display: block;
margin: 0 auto;
width: 50%;
height: auto;
margin-top: 10px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 999;
text-align: center;
line-height: 150px;
font-size: 30px;
color: #fff;
display: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var marquee = $('.marquee');
var container = $('.container');
var clone = marquee.clone();
container.append(clone);
var marqueeWidth = marquee.width();
var containerWidth = container.width();
var speed = 50;
var timer = null;
var start = function() {
var x = container.scrollLeft();
if(x >= marqueeWidth) {
container.scrollLeft(x - marqueeWidth);
} else {
container.scrollLeft(x + 1);
}
};
var stop = function() {
clearInterval(timer);
timer = null;
}
var prize = [
{name:'奖品1',imgUrl:'./img/prize1.jpg'},
{name:'奖品2',imgUrl:'./img/prize2.jpg'},
{name:'奖品3',imgUrl:'./img/prize3.jpg'},
{name:'奖品4',imgUrl:'./img/prize4.jpg'},
{name:'奖品5',imgUrl:'./img/prize5.jpg'},
{name:'奖品6',imgUrl:'./img/prize6.jpg'}
];
//鼠标进入容器暂停滚动，显示抽奖结果
container.on('mouseenter', function() {
stop();
var random = Math.floor(Math.random() * prize.length);
var selectedPrize = prize[random];
$('.mask').html(selectedPrize.name + '<br/><img src="' + selectedPrize.imgUrl + '">').fadeIn(1000, function() {
setTimeout(function() {
$('.mask').fadeOut(1000, function() {
timer = setInterval(start, speed);
});
}, 3000);
});
});
//鼠标离开容器恢复滚动
container.on('mouseleave', function() {
timer = setInterval(start, speed);
});
timer = setInterval(start, speed);
});
</script>
</head>
<body>
<div class="container">
<div class="marquee">
<div class="item">奖品1<img src="./img/prize1.jpg"></div>
<div class="item">奖品2<img src="./img/prize2.jpg"></div>
<div class="item">奖品3<img src="./img/prize3.jpg"></div>
<div class="item">奖品4<img src="./img/prize4.jpg"></div>
<div class="item">奖品5<img src="./img/prize5.jpg"></div>
<div class="item">奖品6<img src="./img/prize6.jpg"></div>
</div>
<div class="mask"></div>
</div>
</body>
</html>
在上面的代码中，我们创建了一个名为prize的数组，其中包含了6个奖品的信息。在鼠标进入容器并暂停滚动时，我们随机选取一个奖品信息并在遮罩层中显示出来。3秒后，遮罩层消失，滚动效果重新开始。
至此，我们已经成功实现了适用于移动端的跑马灯抽奖特效。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现适用于移动端的跑马灯抽奖特效示例 - Python技术站
微信扫一扫 
支付宝扫一扫 