Home > Web Front-end > JS Tutorial > Text based on jquery runs upwards like a marquee effect_jquery

Text based on jquery runs upwards like a marquee effect_jquery

WBOY
Release: 2016-05-16 16:35:49
Original
1089 people have browsed it

I wanted to achieve an effect similar to a marquee, but found that the marquee had spaces. The effect was not beautiful, so I wrote it using jquery

Page code

<div class="recordList"> 
<ul class="tpl-rotate-recordList" style="margin-top: 0px;"> 
<li class="tpl-rotate-recordList-item"> 
恭喜187****5204获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜137****1372获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜156****0276获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜139****9856获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜138****8118获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****5555获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
</ul> 
</div>
Copy after login

js code

/*自动轮换xuyw*/ 
var AutoScroll = function(a) { 
$(a).find("ul:first").animate( { 
marginTop : "-20px" 
}, 500, function() { 
$(this).css( { 
marginTop : "0px" 
}).find("li:first").appendTo(this) 
}) 
} 
if ($(".recordList ul li").length > 0) { 
setInterval('AutoScroll(".recordList")', 2000) 
} else { 
$(".recordList").hide() 
}
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template