中奖人员信息向上滚动

最近公司搞一个抽奖转盘,然后下面有个中奖人列表信息,向上滚动的效果,在网上找了好了好多demo,不过他们大部分都有些小问题,因为我的数据第动态添加进来的,所以会导致重复叠加div向上滚动,这样太耗性能了,搞了两天,终于问公司其他同事解决了,下面写出来分享下:

动态添加数据我就不写了

这里是个js封装的,类似一jq,到时候直接引进代码里就行了(这个是公共代码,只需放到一个文件夹里)

/***/
(function($){$.fn.myScroll = function(options){//默认配置var defaults = {speed:40,  //滚动速度,值越大速度越慢rowHeight:24 //每行的高度
        };var opts = $.extend({}, defaults, options),intId = [];function marquee(obj, step){obj.find("ul").animate({marginTop: '-=1'},0,function(){var s = Math.abs(parseInt($(this).css("margin-top")));if(s >= step){$(this).find("li").slice(0, 1).appendTo($(this));$(this).css("margin-top", 0);}});}this.each(function(i){var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);intId[i] = setInterval(function(){if(_this.find("ul").height()<=_this.height()){clearInterval(intId[i]);}else{marquee(_this, sh);}}, speed);_this.hover(function(){clearInterval(intId[i]);},function(){intId[i] = setInterval(function(){if(_this.find("ul").height()<=_this.height()){clearInterval(intId[i]);}else{marquee(_this, sh);}}, speed);});});}})(jQuery);

然后只需写个向上滚动的js

 $("#person").myScroll({speed:40,//数值越大,速度越慢rowHeight:20//li的高度})

这样就ok了

html:

<div cllass="person">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>

转载于:https://www.cnblogs.com/creatP/p/6797658.html

中奖人员信息向上滚动相关推荐

图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕特殊滚动类字幕制作向上向下向左向右滚动字幕制作效果含拖动和消失全程真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...
jQuery实现消息列表循环垂直向上滚动
一.HTML代码 <ul id="express"><li>・2010考研英语大纲到货75折...</li><li>・权威定本四大名 ...
html滚动字幕如何调色,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕特殊滚动类字幕制作向上向下向左向右滚动字幕制作效果含拖动和消失全程真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...
vue项目新闻消息向上滚动案例
vue项目新闻消息向上滚动案例效果如下图所示: 代码组件如下: <template><div class="message-page"><div c ...
编写Java程序，使用JTable表格组件展现人员信息列表
返回本章节返回作业目录需求说明: 使用JTable组件显现人员信息列表实现思路: 创建一个JTable对象. 创建一个JScrollPane对象(显示横向和纵向滚动条). 将表格添加到滚动面板. ...
公安局监狱人员信息一体化采集仪_设备
今天分享一些人员信息一体化采集仪设备(以下简称一体化采集仪)的知识,关注过一体化采集仪朋友们就知道这种设备有软硬件之分,硬件设备也有大小之分,常规称为大机台和便携式采集台.有些朋友可能不知道它们也应用 ...
人员信息管理系统练习
/* 项目人员信息管理系统练习最多10个人把信息保存到文件中去 */ #include <stdio.h> #include <string.h> int save() ...
向上滚动tabBar隐藏向下显示
原理: 监听滚动事件并获取页面当前的滚动高度,比较滚动前后的高度,判断是向上滚动还是向下滚动.并对tabBar样式进行更改. <html> <style>html body { ...
android 上滑隐藏view,Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...

中奖人员信息向上滚动

中奖人员信息向上滚动相关推荐

最新文章

热门文章