通过Animate+jQuery实现网页的动态效果

最新推荐文章于 2024-04-03 04:31:56 发布

SAP_LIU

最新推荐文章于 2024-04-03 04:31:56 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/qq_42376877/article/details/118957870

版权

实现办法：

1、在html代码的head部分

引入animate.js源文件，具体文件可在官网进行下载

引入jQuery.js 文件，编写项目时需要用到

2、用一个空的div标签将需要实现动态效果的标签(div、li、span等等)包裹住

3、利用css选择器的> 标签用div包裹住与花样入场效果相冲突的动态效果

4、$(".a1").addClass("animated bounceInLeft show").removeClass("fade");

类元素a1 通过addClass命令增加三个新的类 animated bounceInLeft show 其中

animated是使用animated动态效果的前提

bounceInLeft 是animated样式文件中提供的动态效果的类名

show 是为了展示当前的元素初始状态是fade隐藏状态的另外fade 和 show 类需要自己在样式表中进行添加

通过removeClass命令去除fade样式将元素显现出来

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/OPPO/css/animate.min.css">        
    <!-- 选择你animate.css保存的路径  -->
    <title>Document</title>
</head>
<body>
<style>
    .world_left>div>div{                            
        border-bottom: 3px solid #DFDFDF;        
        transition: all .3s;                       
    }                                                   
    .world_left>div:hover>div{                     
        transform: translateY(-10px);
    }                                               
    .fade{
        opacity: 0;
    }
    .show{
        opacity: 1;
    }
    .world_left{
    margin-top: 600px;
    width: 800px;
    }
    .world_left>div{
        float: left;
        margin: 10px;
    }
    #world{
        height: 2000px;
    }
</style>





<div id="world">                              <!-- img更改为你想设置的图片 -->
    <div class="world_left">
        <div class="a1 fade">
            <div>                                                       
                <img src="" >
            </div>
        </div>
        <div class="a2 fade">
            <div>
                <img src="">
            </div>
        </div>
        <div class="a3 fade">
            <div>
                <img src="">
            </div>
        </div>
        <div class="a4 fade">
            <div>
                <img src="">
            </div>
        </div>
    </div>
</div>
<script src="jquery-1.11.3.js"> </script> 
<script>
    $(window).scroll(function() {   
        var scrollT =  document.documentElement.scrollTop || document.body.scrollTop;            //获取当前页面的滚动条纵坐标位置 与 body滑动到的位置做对比
        if(scrollT = 500){                                                                       //2000为窗口滚到的位置，滚到2000像素的位置时   执行下述指令
            $(".a1").addClass("animated bounceInLeft show").removeClass("fade");
            $(".a2").addClass("animated bounceInDown show").removeClass("fade");
            $(".a3").addClass("animated bounceInUp show").removeClass("fade");
            $(".a4").addClass("animated bounceInRight show").removeClass("fade");
        } 
    });
</script>
</body>
</html>

SAP_LIU

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
通过Animate+jQuery实现网页的动态效果

实现办法：1、在html代码的head部分引入animate.js源文件，具体文件可在官网进行下载引入jQuery.js 文件，编写项目时需要用到2、用一个空的div标签将需要实现动态效果的标签(div、li、span等等)包裹住3、利用css选择器的>标签用div包裹住与花样入场效果相冲突的动态效果4、$(".a1").addClass("animatedbounceInLeftshow").removeClass("fade");类...
复制链接

扫一扫