为了账号安全,请及时绑定邮箱和手机立即绑定

滚动图片案例

2019.05.08 15:59 360浏览
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTD-8" />
    <title>滑动图片案例</title>
    <style>
    .content {
        width: 100%;
        height: 3000px;
    }
    .topBox {
        width: 100%;
        height: 800px;
        background-color: #ccc;
    }
    .imgBox {
        position: relative;
        width: 100%;
    }
    .imgBox .wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .imgBox .wrapper .leftText {
        flex: 1;
    }
    .imgBox .wrapper .rightImg {
        position: relative;flex: 1;
    }
    .photo {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: opacity 1s ease;
        background-color: aqua;
    }
    .photo_1 {
        opacity: 0;
        z-index: 1;
    }
    .photo_2 {
        opacity: 0;
        z-index: 2;
    }
    .photo_3 {
        opacity: 0;
        z-index: 3;
    }
    .photo_4 {
        opacity: 0;
        z-index: 4;
    }
    .photo_5 {
        opacity: 0;
        z-index: 5;
    }
    .bottomBox {
        width: 100%;
        height: 200px;
        background-color: #f3deac;
    }
    </style>
</head>
<body>
    <div class="content">
        <div class="topBox"></div>
        <div class="imgBox">
            <div class="wrapper">
                <div class="leftText">
                    <p>测试</p>
                </div>
                <div class="rightImg">
                    <div class="photo" style="background-color: red;z-index: 5"></div>
                    <div class="photo" style="background-color: blue;z-index: 4">
                    </div><div class="photo" style="background-color: green;z-index: 3">
                    </div><div class="photo" style="background-color: yellow;z-index: 2">
                    </div><div class="photo" style="z-index: 1"></div>
                </div>
            </div>
        </div>
        <div class="bottomBox"></div>
    </div>
    <script>
        var length = document.getElementsByClassName('photo').length;
        var bottomTop = document.getElementsByClassName('bottomBox')[0].offsetTop;
        var clientHeight = document.documentElement.clientHeight;
        document.getElementsByClassName('imgBox')[0].style.height = clientHeight * length + 'px';
        document.getElementsByClassName('wrapper')[0].style.height = clientHeight + 'px';
        let i = 0;
        window.onscroll = function () {
            var screenTop = document.documentElement.scrollTop || document.body.scrollTop;
            var minHeight = document.getElementsByClassName('imgBox')[0].offsetTop;
            var boxHeight = document.getElementsByClassName('imgBox')[0].offsetHeight;
            var stepHeight = Math.floor((boxHeight - clientHeight) / length);
            if (screenTop >= minHeight && screenTop < minHeight + boxHeight - clientHeight) {
                // console.log('开始固定');var top = document.getElementsByClassName('wrapper')[0].offsetTop;
                document.getElementsByClassName('wrapper')[0].style.position = 'fixed';
                document.getElementsByClassName('wrapper')[0].style.left = 0;
                document.getElementsByClassName('wrapper')[0].style.top = document.documentElement.scrollTop || document.body.scrollTop + 'px';
                document.getElementsByClassName('wrapper')[0].style.right = 0;
                if (screenTop >= (minHeight + stepHeight * i + stepHeight) && i < length - 1) {
                // 根据步长循环改变样式
                for (let j = 0; j <= i; j++) {
                    var array = document.getElementsByClassName('photo')[j].classList;
                    // 添加样式
                    document.getElementsByClassName('photo')[j].classList.add('photo_' + (j + 1));}
                    i++;
                } else if (screenTop < (minHeight + stepHeight * i) && screenTop >= (minHeight + stepHeight * i - stepHeight) && i >= 0) {
                    console.log('向上滑动的时候', i);// 4 3 2 1
                    document.getElementsByClassName('photo')[i - 1].classList.remove('photo_' + (i));
                    i--;
                }
            } else if(screenTop >= minHeight + boxHeight - clientHeight){
                document.getElementsByClassName('wrapper')[0].style.position = 'absolute';
                document.getElementsByClassName('wrapper')[0].style.left = 0;
                document.getElementsByClassName('wrapper')[0].style.bottom = 0;
                document.getElementsByClassName('wrapper')[0].style.right = 0;
                document.getElementsByClassName('wrapper')[0].style.top = '';
            } else if(screenTop<minHeight) {
                document.getElementsByClassName('wrapper')[0].style.position = 'relative';
                document.getElementsByClassName('wrapper')[0].style.left = 0;
                document.getElementsByClassName('wrapper')[0].style.top = 0;
                document.getElementsByClassName('wrapper')[0].style.right = 0;
            }
       }
    </script>
</body>
</html>

实现效果:滑动到图片包裹层的时候,图片层固定定位,继续下滑,图片切换,上滑的时候恢复

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消