在一次项目中要用到最新订单上下滚动效果,这个文字上下滚动代码,我觉得相对来说简单易懂,直接拿到项目中可以万能使用。
css、js文件已经远程链接了你可以另存这些文件到本地。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="520ym.net">
<meta name="description" content="简单易懂的文字上下滚动代码 Base Template.">
<meta name="keywords" content="简单易懂的文字上下滚动代码,Template">
<title>简单易懂的文字上下滚动代码</title>
<link rel="stylesheet" href="http://demo.webcss.top/code/demo7506/index.css">
</head>
<body style="background: rgb(243, 243, 243);">
<!-------------------- 正文 -------------------->
<div class="content">
<!--滚动订单-->
<div class="i35-wrap">
<H5>通过审核,领取成功</H5>
<div class="i35-con">
<div class="gundong" style="display: block;">
<ul class="scroll">
<li>? [最近发货]:李**在10分钟前已发货</li>
<li>? [最近发货]:朱**在10分钟前已发货</li>
<li>? [最近发货]:黎**在10分钟前已发货</li>
<li>? [最近发货]:张**在10分钟前已发货</li>
<li>? [最近发货]:陈**在10分钟前已发货</li>
<li>? [最近发货]:刘**在10分钟前已发货</li>
<li>? [最近发货]:赵**在10分钟前已发货</li>
<li>? [最近发货]:周**在10分钟前已发货</li>
<li>? [最近发货]:朱**在10分钟前已发货</li>
<li>? [最近发货]:吴**在10分钟前已发货</li>
<li>? [最近发货]:王**在10分钟前已发货</li>
<li>? [最近发货]:秦**在10分钟前已发货</li>
<li>? [最近发货]:方**在10分钟前已发货</li>
<li>? [最近发货]:马**在10分钟前已发货</li>
<li>? [最近发货]:唐**在10分钟前已发货</li>
</ul>
</div>
</div>
</div>
<script src="http://demo.webcss.top/code/demo7506/jquery.min.js"></script>
<script src="http://demo.webcss.top/code/demo7506/i5scroll.js"></script>
<script>
$('.i35-title li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.gundong').eq($(this).index()).show().siblings('.gundong').hide();
});
$(".scroll").i5Scroll();
</script>
<!--滚动订单END-->
</div>
</body>
</html>