监听滚动条实现到固定位置时触发事件

最新推荐文章于 2024-09-29 23:00:02 发布

jeffry1988

最新推荐文章于 2024-09-29 23:00:02 发布

阅读量4.1k

点赞数

分类专栏：学习笔记文章标签： jQuery 图片特效事件触发

本文链接：https://blog.csdn.net/sneipu/article/details/79165145

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近在做毕设，其中有一个地方需要做一个当滚动条到一定位置时图片能自动飞入的特效，通过参考网上的资料做了一个简单的飞入特效。
css

#box{
        position: relative;
        width: 1000px;
        height: 490px;
        margin:200px auto 0;
    }
    #box img{
        position: absolute;
    }
    #box img:nth-child(1){
        /*left:-8px;*/
        top:-148px;
        left:-1500px;
    }
    #box img:nth-child(1).on{
        left:-70px;
                width: 500px;
                height: 280px;
        transition: 0.5s 1s;
    }
    #box img:nth-child(2){         
        /*left:163px;*/
        top:178px;
        left:-1500px;
    }
    #box img:nth-child(2).on{
        left:-70px;
        transition: 0.5s 0.5s;
                width:500px;
                height: 280px;
    }


    #box img:nth-child(3){
        /*left:510px;*/
        top:-148px;
        left:1500px;
    }
    #box img:nth-child(3).on{
        left:570px;
        transition: 0.5s 0.5s;
                width: 500px;
                height: 280px;
    }
    #box img:nth-child(4){
        /*left:656px;*/
        top:178px;
        left:1500px;
    }
    #box img:nth-child(4).on{
        left:570px;
        transition: 0.5s 1s;
                width:500px;
                height: 280px;
    }

html的部分代码

        <div id="box">
                    <img src="img/xxxx.jpg">
                    <img src="img/xxxx.jpg">
                    <img src="img/xxxx.jpg">
                    <img src="img/xxxx.jpg">
                </div>

监听滚动条我用了jQuery

$(document).ready(function () {
                $(window).scroll(function () {//获得滚动条距离顶部的高度
                    if ($(window).scrollTop() > 100) {
                        var box = document.getElementById("box");
                        var aImgs = box.getElementsByTagName("img");                       
                            for (var i = 0; i < aImgs.length; i++) {
                                aImgs[i].className = "on";
                            }
                    }
                });
            });