js实现抽奖滚动效果
目录
- 一、效果展示
- 二、代码说话
- 三、总结经验
一、效果展示
本文介绍js实现抽奖滚动效果的实现过程。具体效果如下图：
二、代码说话
话不多说，上代码最实在。
1、scroll.js
var Scroll = function ({
eleID,
scrollID,
targetID = null,
pageSize = 10,
field = 'id',
duration = 5,
}) {
this._targetElement = null;
this._element = document.getElementById(eleID);
this._scrollElement = document.getElementById(scrollID);
if (targetID) this._targetElement = document.getElementById(targetID);
this._size = pageSize;
this._len = 0;
this._ids = {};
this._field = field;
this._duration = duration;
this._itemWidth = 0;
this.init();
return this;
}
Scroll.prototype.init = function () {
if (this._targetElement) {
this._targetElement.style.position = 'absolute';
this._targetElement.style['z-index'] = 100000;
}
this._element.style.position = 'relative';
this._element.style.overflow = 'hidden';
this._element.style.display = 'flex';
this._scrollElement.style['will-change'] = 'transform';
this._scrollElement.style.position = 'absolute';
this._scrollElement.style.display = 'flex';
this._scrollElement.style.transform = 'translateX(0%)';
this._scrollElement.style['z-index'] = 9999;
// this._scrollElement.style['-webkit-transition'] = transition;
// this._scrollElement.style['-moz-transition'] = transition;
// this._scrollElement.style['-ms-transition'] = transition;
// this._scrollElement.style['-o-transition'] = transition;
// this._scrollElement.style['transition'] = transition;
// console.log(this._scrollElement.children)
this.createNoneElement();
let list = Array.from(this._scrollElement.children);
this._len = list.length;
this._itemWidth = (this._scrollElement.clientWidth / this._len).toFixed(2);
list.forEach((item, index) => {
this._ids[item.dataset[this._field]] = index;
})
// console.log(this._ids, this._len)
for (var i = 0; i < this._size; i++) {
this._scrollElement.innerHTML += this._scrollElement.innerHTML;
}
}
Scroll.prototype.createNoneElement = function () {
// console.log(this._scrollElement.children[0])
let child = document.createElement(this._scrollElement.children[0].tagName);
child.classList.value = this._scrollElement.children[0].classList.value;
Array.from(this._scrollElement.children[0].style).forEach((item, index) => {
child.style[item] = this._scrollElement.children[0].style[item]
})
child.innerHTML = '很遗憾
您未中奖';
this._scrollElement.append(child);
}
Scroll.prototype.start = function (winId) {
let n = this._ids[winId] ? this._ids[winId] : this._ids[undefined],
x = ((this._size - 1) * this._len + Number(n)) * this._itemWidth;
if (this._targetElement) {
x = x - (this._targetElement.offsetLeft + this._targetElement.clientWidth / 2) + this._itemWidth / 2;
}
console.log('winId=' + winId, 'x=' + x);
this._scrollElement.style.transform = 'translateX(0%)';
this._scrollElement.style['transition-duration'] = '0ms';
let handle = setTimeout(() => {
this._scrollElement.style['transition-duration'] = this._duration + 's';
this._scrollElement.style.transform = 'translateX(-' + x + 'px)';
clearTimeout(handle);
})
}
2、index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>CaseDrop.com - 打开箱子title>
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="./css/scroll.css" type="text/css">
<script type="text/javascript" src="./css/jquery.min.js">script>
<script type="text/javascript" src="css/scroll.js">script>
head>
<body>
<div class="roulette-container" id="roulette-container-1" style="">
<div class="roulette-container-open" id="roulette-container-1-open">div>
<ul id="item-case-goods-1" class="item-case-goods">
<li class="item-small-case restricted" data-id="1">
<img class="case" src="https://game-aesy.c5game.com/steam/730/6d27f63b1a073edbe672b7484cdc4343.png?x-oss-process=image/resize,w_290,h_160" alt="">
<div class="title">
<i class="fa fa-square">i> {:explode('|',$boxgoods.goods_itemName)[0]}<br>{:explode('|',$boxgoods.goods_itemName)[1]}
div>
li>
<li class="item-small-case restricted" data-id="2">
<img class="case" src="https://casedrop.com/images/730/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot621FAR17PLfYQJD_9W7m5a0mvLwOq7cqWdQ-sJ0xOzAot-jiQa3-hBqYzvzLdSVJlQ3NQvR-FfsxL3qh5e7vM6bzSA26Sg8pSGKJUPeNtY/360fx360f.png" alt="">
<div class="title">
<i class="fa fa-square">i> {:explode('|',$boxgoods.goods_itemName)[0]}<br>{:explode('|',$boxgoods.goods_itemName)[1]}
div>
li>
<li class="item-small-case restricted" data-id="3">
<img class="case" src="https://casedrop.com/images/730/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpotLu8JAllx8zAaAJE486zh5S0lfjmNrrdqWdY781lteXA54vwxgCxqBE6Nzv0IIbBdQU6ZAuC-Vm6wu68hMe46MzIzCE26SQk7S3YzECpwUYbTEk7wBI/360fx360f.png" alt="">
<div class="title">
<i class="fa fa-square">i> {:explode('|',$boxgoods.goods_itemName)[0]}<br>{:explode('|',$boxgoods.goods_itemName)[1]}
div>
li>
<li class="item-small-case restricted" data-id="4">
<img class="case" src="https://casedrop.com/images/730/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou-6kejhjxszYfi5H5di5mr-HnvD8J4Tdl3lW7YsijuuUo9StiQG2_0Q-N2z0JobAdQU2ZQmCrFC9kurqh5W97Z6amnJgpGB8sqTzmbCH/360fx360f.png" alt="">
<div class="title">
<i class="fa fa-square">i> {:explode('|',$boxgoods.goods_itemName)[0]}<br>{:explode('|',$boxgoods.goods_itemName)[1]}
div>
li>
ul>
div>
<script>
$(function(){
let s = new Scroll({
eleID: "roulette-container-1",
scrollID: "item-case-goods-1",
targetID: "roulette-container-1-open",
pageSize: 6,
})
s.start(Math.ceil(Math.random() * 10) % 5);
})
script>
body>
3.scroll.css
/**{*/
/*margin: 0px !important;*/
/*padding: 0px !important;*/
/*border-spacing: 0px !important;*/
/*list-style: none;*/
/*letter-spacing: 0px;*/
/*}*/
.item-case-open {
animation: mymove 1s infinite linear;
}
@-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: -100%;
}
}
.roulette-container {
position: relative;
overflow: hidden;
display: flex;
background: #181818 !important;
}
.roulette-container-open {
border: 1px solid #00FF00;
position: absolute;
height: 100% !important;
width: 275px !important;
left: 50% !important;
margin-left: -137px !important;
/*z-index: 100000 !important;*/
}
.item-case-goods {
word-break: keep-all;
white-space: nowrap;
padding: 0px;
margin: 0px;
/*will-change: transform;*/
}
.item-case-goods li {
width: 265px !important;
height: 164px !important;
border: 1px solid green;
box-sizing: border-box;
margin: 10px 2px;
}
.item-case-goods li .title {
margin-top: -50px;
text-align: left;
padding-left: 1rem;
}
三、总结经验
以上是我删减后的代码，可能无法直接在本地允许，但是主要的scroll.js文件的内容，用法和index.html中一样，基本上就不会有问题了。
追加：效果2（无需参数targetID，将targetID传给参数eleID，然后将scrollID元素移入eleID元素中）
希望能够帮助到有需要的朋友，同时记录下来方便以后需要的时候方便复用。感谢各位四海八荒的朋友们，希望能够点个赞鼓励一下。