网页中订单文字信息上下无限循环滚动代码简单易懂

在一次项目中要用到最新订单上下滚动效果,这个文字上下滚动代码,我觉得相对来说简单易懂,直接拿到项目中可以万能使用。
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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容