中奖人js滚动效果_jQuery教程如何实现中奖人员信息向上滚动

本篇教程介绍了jQuery教程如何实现中奖人员信息向上滚动，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

动态添加数据我就不写了

这里是个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:

1111
2222
3333
4444
5555

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！

中奖人js滚动效果_jQuery教程如何实现中奖人员信息向上滚动相关推荐

中奖人员信息向上滚动
最近公司搞一个抽奖转盘,然后下面有个中奖人列表信息,向上滚动的效果,在网上找了好了好多demo,不过他们大部分都有些小问题,因为我的数据第动态添加进来的,所以会导致重复叠加div向上滚动,这样太耗性能 ...
中奖人js滚动效果_jQuery实现中奖播报功能（让文本滚动起来）简单设置数值即可...
在很多场景中,我们需要使用到中奖信息播报,或者一些文本信息循环滚动播报,在结合实际的开发中,然后也百度查询了相关的知识点,现在送上jQuery实现文本滚动. 1:html代码文件相关使用说明也在页面 ...
向上来回无缝滚动html,移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
jQuery无缝向上滚动效果
该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果,废话不多说,直接上代码 (1)向上滚动 HTML: <div id="demo" style=" ...
用jquery实现平滑的页面滚动效果
用jquery实现平滑的页面滚动效果通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于 https://css-tricks.com/snippets/jquery/smoot ...
recycleview 清空数据滚动顶部_爱剪辑：制作数字滚动效果，翻滚吧字幕！
人来齐了8? 这次的效果依然吸睛哦! 用上爱剪辑的滚动类字幕特效,就能花式玩转数据- 用途当然是广泛der~ 倒计时.数据展示等一切关于数字的动画效果都适用~ 脑洞有多大,你的视频舞台就有多大 Par ...
html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...
html 点击后上下滚动效果,css 上下滚动效果
.scroll{ overflow:hidden; width:100%; } .scrollout{ height:250px; width:100%; overflow:hidden; curso ...
html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...

中奖人js滚动效果_jQuery教程如何实现中奖人员信息向上滚动

中奖人js滚动效果_jQuery教程如何实现中奖人员信息向上滚动相关推荐

最新文章

热门文章

中奖人js滚动效果_jQuery教程 如何实现中奖人员信息向上滚动

中奖人js滚动效果_jQuery教程 如何实现中奖人员信息向上滚动相关推荐

最新文章

热门文章

中奖人js滚动效果_jQuery教程如何实现中奖人员信息向上滚动

中奖人js滚动效果_jQuery教程如何实现中奖人员信息向上滚动相关推荐