基于jq中奖记录效果实现
来源:互联网 发布:配送软件 编辑:程序博客网 时间:2024/05/16 03:17
最近需要做一个中奖记录的滚动效果,下面来写一个基于jq的呆毛:
效果图:
html代码:主要是把中奖记录做一个展示
<div class="panel"> <h2>中奖记录</h2> <div class="activity" id="list"> <ul> <li>吴琼琼1 获得了iphone7</li> <li>吴琼琼2 获得了imac</li> <li>吴琼琼3 获得了iwatch</li> <li>吴琼琼4 获得了好吃的</li> <li>吴琼琼5 获得了哈哈哈哈</li> </ul> </div> </div>
js:
$(function() { var listPanel = $('#list ul'); var z = 0; //向上滚动top值 function up() { //向上滚动 listPanel.animate({ //中奖结果 'top': (z - 35) + 'px' }, 1500, 'linear', function() { listPanel.css({ 'top': '0px' }) .find("li:first").appendTo(listPanel); up(); }); } up();});
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。请猛戳戳戳戳jQuery 效果 - animate() 方法
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。请猛戳戳戳戳jQuery 文档操作 - appendTo() 方法
阅读全文
0 0
- 基于jq中奖记录效果实现
- H5实现中奖记录逐行滚动切换效果
- JQ实现放大镜效果
- jq实现置顶效果
- jq实现标签页效果
- jq实现果冻抖动效果
- jq实现逐字打印效果
- jq实现的楼层效果
- 基于JQ实现图片提示
- jq实现级联下拉框效果
- jq实现级联下拉框效果
- jq实现切换栏目显示效果
- jq实现简单的tab切换效果
- jq实现简单的拖拽效果
- JQ实现简单的弹幕效果
- jq实现二级下拉菜单动画效果
- JQ实现效果:滑动隐藏&滑动显示
- JQ实现效果:焦点选中样式
- 【初探】 冒泡排序 学习总结笔记
- Mybatis一对多返回结果问题
- 鹅厂一面题目总结
- 由浅入深JavaScript4基础-引用类型和对象
- HTML控件和Web控件
- 基于jq中奖记录效果实现
- 个人笔记(第七篇)
- 差分约束/并查集——BZOJ1202/Luogu2294 [HNOI2005]狡猾的商人
- Java实现全排列
- 基于CMMI软件工程的问题解答
- N 皇后问题 回溯/深搜
- windows10 python2.7 opencv3
- css 动画效果
- Redis命令总结