一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > 网页制作 > html5教程

推荐专题

最新下载

热门教程

H5实现中奖记录逐行滚动切换效果

时间：2022-06-25 18:04:16 编辑：袖梨 来源：一聚教程网

前端页面需先引入jquery    

中奖记录跑马灯特效

中奖记录

恭喜Ivy抽中10元话费

恭喜LinDL抽中100元京东E卡

恭喜Mary抽中40元电影票优惠券

恭喜Ivy抽中30元话费

恭喜金坎抽中50元话费

恭喜Ivy抽中80元话费

恭喜Ivy抽中200元话费

恭喜慧林抽中5000元话费

恭喜张敏抽中iPhone7

恭喜Ivy抽中10元话费

利用定时器实现中奖记录逐行展示 recordRoll.js    /**     * Created by lin on 2017/3/12.     */    (function($){      $.fn.extend({        RollTitle:function(opt){          if(!opt)varopt={};          var_this =this;          _this.timer =null;          _this.lineH = _this.find("p:first").height();          _this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);          _this.speed=opt.speed,          _this.timespan=opt.timespan;          if(_this.line==0)this.line=1;              _this.scrollUp=function(){            _this.animate({              marginTop:0            },_this.speed,function(){              for(i=1;i<=_this.line;i++){                _this.find("p:first").appendTo(_this);              }              _this.css({marginTop:0});            });          }          _this.hover(function(){            clearInterval(_this.timer);          },function(){            _this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);          }).mouseout();        }      })    })(jQuery); 效果图：

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理