基于jquery实现的文字向上跑动类似跑马灯的效果

前端技术 2023/09/03 JavaScript
想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个

页面代码
复制代码 代码如下:

<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>

js代码
复制代码 代码如下:

/*自动轮换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()
}

本文地址：https://www.stayed.cn/item/8060

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案