|
只能用作参考作用.方便自己记忆.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab切换动画效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.footer_top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: #fec98f;
border-radius: 0.5rem 0.5rem 0 0;
position: relative;
}
.new {
font-size: 2.25rem;
padding: 1rem 0;
}
.tabline {
width: 9rem;
height: 0.5rem;
background-color: #999;
position: absolute;
top: 4.5rem;
left: 6.5rem;
transition: all 0.3s ease;
}
body {
max-width: 750px;
}
</style>
<body>
<div class="footer_top">
<div class="new">新手专区</div>
<div class="new">大神专区</div>
<span class="tabline"></span>
</div>
</body>
<script>
$('.new').click(function () {
var index = $(this).index();
if (index == 0) {
$('.tabline').css('left', '6.5rem')
}
else if (index == 1) {
$('.tabline').css('left', '22rem')
}
})
</script>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '20px';
} else {
docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</html>
|