纵向抽奖滚动效果代码

网上参考了一篇文章是横向滚动，现在实现了一篇纵向滚动的抽奖

// HomePage.js
function HomePage() {let s = null;useEffect(() => {s = new Scroll({eleID: "roulette-container-1",scrollID: "item-case-goods-1",// targetID: "roulette-container-1-open",pageSize: 3,})
}, []);const onStart = () => {s.start(Math.floor(Math.random()*5)+1);}return (<div className='index'><div className="roulette-container" id="roulette-container-1"><ul id="item-case-goods-1" className="item-case-goods"><li className="item-small-case restricted" data-id="1"><img className="content-img" src={img1Src} alt="" /></li><li className="item-small-case restricted" data-id="2"><img className="content-img" src={img2Src} alt="" /></li><li className="item-small-case restricted" data-id="3"><img className="content-img" src={img3Src} alt="" /></li><li className="item-small-case restricted" data-id="4"><img className="content-img" src={img4Src} alt="" /></li></ul></div><div><Button className='start-btn' onClick={onStart}>开始</Button></div></div>
)
}

// HomePage.scss
.content-img{width: 500px;height: 500px;margin: auto;display: block;
}
.start-btn {width: 300px;border: 2px solid red;color: red;background: white;margin-top: 50px;
}.item-case-open {animation: mymove 1s infinite linear;
}.roulette-container {position: relative;height: 502px;overflow: auto;}.roulette-container-open {border: 1px solid #00FF00;position: absolute;top: 0;width: 100%;height: 502px;
}.item-case-goods {word-break: keep-all;white-space: nowrap;padding: 0px;margin: 0px;width: 100%;/*will-change: transform;*/
}

// 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._itemHeight = 0;this.init();return this;}
Scroll.prototype.init = function () {if (this._targetElement) {this._targetElement.style.position = 'absolute';this._targetElement.style['z-index'] = 100000;}this._scrollElement.style['will-change'] = 'transform';this._scrollElement.style.position = 'absolute';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;this.createNoneElement();let list = Array.from(this._scrollElement.children);this._len = list.length;this._itemHeight = this._scrollElement.children[0].clientHeight;console.log(this._itemHeight)list.forEach((item, index) => {this._ids[item.dataset[this._field]] = index;})for (var i = 0; i < this._size; i++) {this._scrollElement.innerHTML += this._scrollElement.innerHTML;}
}Scroll.prototype.createNoneElement = function () {let child = document.createElement(this._scrollElement.children[0].tagName);child.classList.value = this._scrollElement.children[0].classList.value;console.log("tagName", 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 class="content-img" style="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],y =((this._size - 1) * this._len + Number(n)) * this._itemHeight;this._scrollElement.style.transform = 'translateY(0%)';this._scrollElement.style['transition-duration'] = '0ms';let handle = setTimeout(() => {this._scrollElement.style['transition-duration'] = this._duration + 's';this._scrollElement.style.transform = 'translateY(-' + y + 'px)';clearTimeout(handle);})
}export default Scroll

参考链接
js实现抽奖滚动效果

纵向抽奖滚动效果代码相关推荐

js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
抽奖滚动效果 python_Python使用Tkinter实现滚动抽奖器效果
更多python教程请到: 菜鸟教程www.piaodoo.com 人人影视www.sfkyty.com 16影视www.591319.com 星辰影院www.591319.com 年底,抽奖这个话题 ...
html滚动效果代码,javascript 实现滚动效果代码整理
1.先写两个最常用最简洁的滚动代码代码如下: 水平滚动: 水平滚动字幕内容垂直滚动: 垂直滚动字内容 2.平稳不间断滚动 var tm=null function newsScroll() { v ...
html鼠标滚动效果代码,JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜 ...
抽奖滚动效果 python_python实现转盘效果 python实现轮盘抽奖游戏
python实现转盘效果 python实现轮盘抽奖游戏来源:中文源码网浏览: 次日期:2019年11月5日 [下载文档: python实现转盘效果 python实现轮盘抽奖游戏.t ...
各种文字滚动效果代码
几排文字向上滚动 <MARQUEE direction=up οnmοuseοut=start(); οnmοuseοver=stop(); scrollAmount=1 scrollDelay ...
html中图片连续滚动代码,[转载]网页设计中的图片连续滚动效果——代码
style="overflow:hidden;width:500px;"> border="0"> id="butong_net_left ...

纵向抽奖滚动效果代码

纵向抽奖滚动效果代码相关推荐

最新文章

热门文章