ifeiwu/multi-text-swipe-up-to-switch.html

## multi-text-swipe-up-to-switch.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多文字向上滑动切换</title>

        <link rel="stylesheet" href="../reset.css" />

        <style>
            .textbox {
                position: relative;
                display: flex;
                justify-content: center;
                font-size: 50px;
                margin-top: 100px;
                letter-spacing: 20px;
            }

            .textbox ul {
                list-style: none;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .textbox li {
                position: absolute;
                top: 55px;
                transition: top .45s ease;
            }

            .textbox li:first-child {
                top: 0;
            }

            .textbox li.up {
                top: -55px;
            }

            .textbox li.up2 {
                top: 0;
            }

            .text-switch-box {
                position: relative;
                width: 180px;
                height: 100%;
            }
        </style>

    </head>
    <body>

        <div class="textbox">
            <div>连接</div>
            <div>
                <div class="text-switch-box">
                    <ul id="text-switch-list">
                        <li>你我</li>
                        <li>企业</li>
                        <li>科技</li>
                        <li>公益</li>
                    </ul>
                </div>
            </div>
            <div>共生未来</div>
        </div>

        <script src="../jquery.js"></script>

        <script>
            $(function() {

                setInterval(function() {

                    let $li1 = $('#text-switch-list li:first-child');
                    let $li2 = $('#text-switch-list li:nth-child(2)');

                    $li1.addClass('up');
                    $li2.addClass('up2');

                    $li1.one('transitionend', function() {

                        $li1.appendTo('#text-switch-list');
                        $li1.removeClass('up');
                        $li2.removeClass('up2');

                    });

                }, 3000);

            });
        </script>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>多文字向上滑动切换</title>

	<link rel="stylesheet" href="../reset.css" />

	<style>
	.textbox {
	position: relative;
	display: flex;
	justify-content: center;
	font-size: 50px;
	margin-top: 100px;
	letter-spacing: 20px;
	}

	.textbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	.textbox li {
	position: absolute;
	top: 55px;
	transition: top .45s ease;
	}

	.textbox li:first-child {
	top: 0;
	}

	.textbox li.up {
	top: -55px;
	}

	.textbox li.up2 {
	top: 0;
	}

	.text-switch-box {
	position: relative;
	width: 180px;
	height: 100%;
	}
	</style>

	</head>
	<body>

	<div class="textbox">
	<div>连接</div>
	<div>
	<div class="text-switch-box">
	<ul id="text-switch-list">
	<li>你我</li>
	<li>企业</li>
	<li>科技</li>
	<li>公益</li>
	</ul>
	</div>
	</div>
	<div>共生未来</div>
	</div>

	<script src="../jquery.js"></script>

	<script>
	$(function() {

	setInterval(function() {

	let $li1 = $('#text-switch-list li:first-child');
	let $li2 = $('#text-switch-list li:nth-child(2)');

	$li1.addClass('up');
	$li2.addClass('up2');

	$li1.one('transitionend', function() {

	$li1.appendTo('#text-switch-list');
	$li1.removeClass('up');
	$li2.removeClass('up2');

	});

	}, 3000);

	});
	</script>

	</body>
	</html>