文章标题

来源：互联网发布：梯度下降算法 matlab 编辑：程序博客网时间：2024/06/14 06:51
页面下滑到制定元素，执行动画效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #text-poster {                position: relative;                margin: 50px;                left: -20px;                opacity: 0;                -webkit-transition: all 1s ease-in-out;                -moz-transition: all 1s ease-in-out;                -o-transition: all 1s ease-in-out;            }            #text-poster.animate {                position: relative;                left: 0px;                opacity: 1;            }        </style>    </head>    <a id="top">123132 </a>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <p>dsa</p>    <div id='text-poster'>        <p>dsadasdas</p>    </div>    <span id="lb" style="top:100px;left:100px;position:fixed;"></span>    <body>        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(window).scroll(function(){                if($(this).scrollTop()+$(this).height()>=$('#text-poster').offset().top){                    $("#text-poster").addClass("animate");                }             })    </body></html>
0 0