Skip to content

Instantly share code, notes, and snippets.

@ifeiwu

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

Created August 22, 2021 03:04
Show Gist options
  • Save ifeiwu/e54dbed54ce1f94427f93ba66b735617 to your computer and use it in GitHub Desktop.
Save ifeiwu/e54dbed54ce1f94427f93ba66b735617 to your computer and use it in GitHub Desktop.
Download ZIP
多文字向上滑动切换
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment