JS实现滚轮滑动图片拉伸并替代效果

weixin_43362799

于 2022-09-03 16:34:50 发布

阅读量369

点赞数

文章标签：开发语言 javascript 前端 css

本文链接：https://blog.csdn.net/weixin_43362799/article/details/126678757

版权

效果是模仿网站首页进去之后页面伸缩的效果。

前言

效果是模仿网站首页进去之后页面伸缩的效果。

一、效果实现-JS方法

这个是实现的方法，当事件触发时对图片和头部元素进行控制

function picChange(){
    let head = document.querySelector('.head_box')//获取头部元素
    let pic = document.querySelector('.headbgi-1')
    let pic2 = document.querySelector('.headbgi-2')//这两行为获取两张图片
    head.className = 'head_box'//移除了big，将高度改变成360像素，下面两个也是如此。
    pic.className = 'headbgi-1'
    pic2.className = 'headbgi-2'
    pic.style.zIndex = -3 //将大的图片放到小的图片下面
}

二、JS触发的情况

1.鼠标往下滚动

代码如下（示例）：

window.addEventListener("wheel", function(e) { //鼠标滚动监听
    if (e.deltaY > 0) {  //如果发现是往下滚动的时候
        picChange()
    }
});

2.页面一开始就不在顶部

代码如下（示例）：

if(document.documentElement.scrollTop>0){ //有可能页面不是在顶部时候刷新
    picChange()
}

三、CSS编写

1.图片CSS

//图片
    .headbgi-1{
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: auto;
        z-index: -1;
        transition: all .6s;
    }
    .headbgi-2{
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 360px;
        opacity: 1;
        transition: all .6s;
        z-index: -2;
    }

2.头部的CSS

.head_box{
    position: relative;
    height: 360px;
    transition: all .6s;
}
.big{
    height: 720px !important;//这样子一开始头部大小就是大图片的大小
    .headbgi-2{
        opacity: 0 !important;
        height: 720px !important;//这里也是为了配合视觉效果
    }
}