一、效果展示

本文介绍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;
}

三、总结经验

以上是我删减后的代码，可能无法直接在本地允许，但是主要的scroll.js文件的内容，用法和index.html中一样，基本上就不会有问题了。

追加：效果2（无需参数targetID，将targetID传给参数eleID，然后将scrollID元素移入eleID元素中）

希望能够帮助到有需要的朋友，同时记录下来方便以后需要的时候方便复用。感谢各位四海八荒的朋友们，希望能够点个赞鼓励一下。

js实现抽奖滚动效果相关推荐

纵向抽奖滚动效果代码
网上参考了一篇文章是横向滚动,现在实现了一篇纵向滚动的抽奖 // HomePage.js function HomePage() {let s = null;useEffect(() => {s ...
JS 实现消息滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js实现title滚动效果
js实现title滚动效果原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了.直接上代码了方式一 var titleText = "您有新订单,请及时处理!".s ...
js歌词逐字滚动效果
js歌词逐字滚动效果 @Null - 滨先上效果图目录结构: 歌词文本music.txt 将酷狗歌词KRC用"酷狗歌词(krc)加解密工具"进行解密后可以得到这种歌词文本 HT ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
抽奖滚动效果 python_Python使用Tkinter实现滚动抽奖器效果
更多python教程请到: 菜鸟教程www.piaodoo.com 人人影视www.sfkyty.com 16影视www.591319.com 星辰影院www.591319.com 年底,抽奖这个话题 ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
js实现文字滚动效果
在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的 ...
HTML+CSS+JS实现简单滚动效果
html代码段,需要引用"autoScroll.js"和"autoScroll.css"两个文件 <!DOCTYPE html> <html ...

js实现抽奖滚动效果

目录

一、效果展示

二、代码说话

三、总结经验

js实现抽奖滚动效果相关推荐

最新文章

热门文章