jquery 中奖名单滚动

每隔一段时间都会获取新的中奖信息，然后这些信息在不断的向上滚动（可以前台定时获取数据，也可以用websocket来更新数据）

html

<div class="need-animation scrollBox"><div class="animation-box successfulCase"><table><tr><td>7</td><td>7</td><td>7</td><td>7</td></tr><tr><td>7</td><td>7</td><td>7</td><td>7</td></tr><tr><td>7</td><td>7</td><td>7</td><td>7</td></tr></table></div></div>

css

.need-animation{height: 400px;overflow: hidden;
}
.animation-box{position: absolute;left: 0;top: 0;
}

var firstPage = {} // 只是一个容器// 第一次获取数据后要执行一次
firstPage.rollMenu({list: '.successfulCase',data: []
})// 下面时定时请求后台数据，然后调用滚动函数 （我这里没写请求）
setInterval(function () {firstPage.rollMenu({list: '.successfulCase',data: [1,2,3,4,5,6]})
},4000)// 滚动函数
// 滚动菜单 加载这一界面时调用这个函数
firstPage.rollMenu = function (opt) {// 数据列表，从顶部滚动到底部就停止；// 当在滚动的过程中获取到数据时，去除滚动掉的完整列表，将新加的数据拼接到底部，继续滚动// 这是animation里面那个top的值就为心在列表的高度减去父亲盒子的高度// 每次执行这个先去除滚动部分var boxHeight = $(opt.list).parent().height();var list = $(opt.list);var tbody = $(opt.list + ' tbody');var lists = $(opt.list + ' tr');var trHeight = $(opt.list +' tr:first-child').height();var curTop = Math.abs(parseInt(list.css('top')));var temp = Math.floor(Math.abs(parseInt(list.css('top'))) / trHeight);lists.each(function (index, value) {if(index < temp){value.remove()}})// 改变当前top距离list.css('top','-'+(curTop-temp*trHeight)+'px')// 遍历获取到的数据，然后生成元素var html = '';opt.data.forEach(function (value) {html += '<tr>'html += '<td>'+value+'</td><td></td><td></td><td></td>'html += '</tr>'})tbody.append(html);var needAnimate = (lists.length - temp + opt.data.length)* trHeight - boxHeight;console.log(needAnimate)console.log(list.css('top'))list.animate({top: '-'+needAnimate+'px'},3000)};

jquery 中奖名单滚动相关推荐

jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)
自己搜的代码,亲测好使,可以根据自己的需要进行样式及js修改 <!doctype html> <html> <head><meta charset=" ...
html5中奖名单特效,jQuery基于json动态随机获取中奖名单抽奖代码
jQuery基于json动态随机获取中奖名单抽奖代码,可以随机批量抽出多个中奖用户名单. 查看演示下载资源: 22 次下载资源下载积分: 20 积分 js代码 //从一个给定的数组arr中,随机 ...
android中奖名单轮播,iOS模拟中奖名单循环滚动效果
本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等 ...
周 7 福利日：中奖名单公布
前言应了今天的推文标题,我决定每周 7 定为福利日. 用订阅号流量主.广告的收入给大家买点书.服务器等福利, 通过评论点赞.抽奖等方式发给大家. 上周末举行的评论送书活动:已经结束.获奖的用户可以在 ...
分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhon ...
中奖名单，老读者请看过来！
PS:此活动长时间有效,直至有效说明结束,最终解释权归北京大学出版社和视学算法所有. 视学算法公众号专注于人工智能(AI).机器学习数学基础,机器学习.深度学习.计算机视觉(CV).AI领域前沿论文分 ...
[转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
中奖名单 | 价值 199 的大数据平台研发课程幸运er
大家还记得上周我们发过的福利嘛? 会员福利放送 | 价值 199 的大数据平台研发课程免费听! 感谢大家的火热报名,然而名额有限,我们通过 Excel 随机挑选了五位幸运者,获得本次大数据平台研发课程 ...
本期赠书中奖名单公布
本期「AI有道」赠书抽奖活动已经结束!截至5月22日中午12点,累计共有366人参与,中奖者的名单也如期产生了.截了张图,如下所示: 恭喜「忆臻」.「Paul Suen」.「Kenny」三位读者中奖. ...

jquery 中奖名单滚动

jquery 中奖名单滚动相关推荐

最新文章

热门文章