<!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>上下滑动</title>
<style>
@font-face {
font-family: "iconfont"; /* Project id 2641640 */
src: url('//at.alicdn.com/t/font_2641640_zxhd9mu3i2.woff2?t=1625010929876') format('woff2'),
url('//at.alicdn.com/t/font_2641640_zxhd9mu3i2.woff?t=1625010929876') format('woff'),
url('//at.alicdn.com/t/font_2641640_zxhd9mu3i2.ttf?t=1625010929876') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrowdown:before {
content: "\e613";
}
.icon-up:before {
content: "\e600";
}
*{
margin:0px;
padding:0px;
}
:root, body, #container{
width:100%;
height:100%;
}
#container{
position:absolute;
top:0px;
}
#container .item{
position:relative;
width:100%;
height:100%;
text-align:center;
color:#fff;
font-size:60px;
line-height:200px;
}
#container .item span{
position:absolute;
font-size:40px;
cursor:pointer;
width:35px;
height:35px;
display:inline-block !important;
line-height:35px;
}
#container .item span.top{
/* top:-80px; */
top:0px;
left:50%;
transform:translateX(-50%)
}
#container .item span.bottom{
/* bottom:-80px; */
bottom:0px;
left:50%;
transform:translateX(-50%)
}
#container .item1{
background-color:rosybrown;
}
#container .item2{
background-color:salmon;
}
#container .item3{
background-color:sandybrown;
}
#container .item4{
background-color:sienna;
}
</style>
</head>
<body>
<div id="container">
<div class="item item1"><span class="iconfont icon-up top"></span>1<span class="iconfont icon-arrowdown bottom"></span></div>
<div class="item item2"><span class="iconfont icon-up top"></span>2<span class="iconfont icon-arrowdown bottom"></span></div>
<div class="item item3"><span class="iconfont icon-up top"></span>3<span class="iconfont icon-arrowdown bottom"></span></div>
<div class="item item4"><span class="iconfont icon-up top"></span>4<span class="iconfont icon-arrowdown bottom"></span></div>
<div class="item item1"><span class="iconfont icon-up top"></span>1<span class="iconfont icon-arrowdown bottom"></span></div>
</div>
<script>
const config = {
// 视口高度
viewHeight:window.innerHeight,
// 最外层dom
container:document.getElementById("container"),
// items
items:document.getElementsByClassName("item"),
// span.top
spanTop:document.getElementsByClassName("top"),
// span.bottom
spanBottom:document.getElementsByClassName("bottom"),
// animation top
timerTop:null,
}
config.containerTop = parseInt(getComputedStyle(config.container).top)
function spanTopClick(){
for(let i = 0; i < config.spanTop.length; i++){
config.spanTop[i].onclick = function(){
// 最外层dom的top减少一个视口高度 3748px
if(parseInt(getComputedStyle(config.container).top) <= -3748){
config.container.style.top = "0px"
}
animation(parseInt(getComputedStyle(config.container).top) - config.viewHeight, "top")
}
}
}
function spanBottomClick(){
for(let i = 0; i < config.spanBottom.length; i++){
config.spanBottom[i].onclick = function(){
// 最外层dom的top减少一个视口高度 3748px
if(parseInt(getComputedStyle(config.container).top) >= 0){
config.container.style.top = "-3748px"
}
animation(parseInt(getComputedStyle(config.container).top) + config.viewHeight, "bottom")
}
}
}
function animation(lastTop, direction){
let speed = 1
clearInterval(config.timerTop)
config.timerTop = setInterval(function(){
if(direction === "top"){
if(parseInt(getComputedStyle(config.container).top) <= lastTop){
clearInterval(config.timerTop)
config.container.style.top = lastTop + "px"
}else{
config.container.style.top = parseInt(getComputedStyle(config.container).top) - speed + "px"
}
speed += 5
}else if(direction === "bottom"){
if(parseInt(getComputedStyle(config.container).top) >= lastTop){
clearInterval(config.timerTop)
config.container.style.top = lastTop + "px"
}else{
config.container.style.top = parseInt(getComputedStyle(config.container).top) + speed + "px"
}
}
speed += 5
}, 30)
}
function init(){
spanTopClick()
spanBottomClick()
}
init()
</script>
</body>
</html>
javascript实现上下滑窗
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/118353895
今日推荐
周排行