js实现抽奖滚动效果

最新推荐文章于 2024-05-11 17:08:08 发布

wenruns

最新推荐文章于 2024-05-11 17:08:08 发布

阅读量4.8k

点赞数 14

分类专栏：前端 # jquery # javascript 文章标签： javascript html5 css3 html jquery

本文链接：https://blog.csdn.net/qq_38421226/article/details/109045580

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

一、效果展示

本文介绍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 = '<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">很遗憾<br/>您未中奖</div>';
    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

<!DOCTYPE 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>&nbsp;{: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>&nbsp;{: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>&nbsp;{: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>&nbsp;{: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;
}