冯娜_20210120冯娜

知识点总结

一、jQuery动画效果

html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>动画效果</title>
        <style type="text/css">
            .box{
                width: 300px;
                height: 300px;
                background-color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <button type="button" id="show">显示</button>
        <button type="button" id="hide">隐藏</button>
        <button type="button" id="toggle">切换</button>
        <button type="button" id="slideDown">划入</button>
        <button type="button" id="slideUp">划出</button>
        <button type="button" id="slideToggle">滑动切换</button><br>
        
        
        <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        <script type="text/javascript">
            var showBtn =$("#show");
            var hideBtn =$("#hide");
            var toggleBtn =$("#toggle");
            var slideDownBtn=$("#slideDown");
            var slideUpBtn=$("#slideUp");
            var slideToggleBtn=$("#slideToggle")
            var dudcBtn=$("#dudc");
            var box = $(".box");
            
            showBtn.on('click',function(){
                box.show(1000);
            })
            hideBtn.on('click',function(){
                box.hide(1000);
            })
            toggleBtn.on('click',function(){
                box.toggle(1000)
            })
            slideDownBtn.on('click',function(){
                box.slideDown(1000)
            })
            slideUpBtn.on('click',function(){
                box.slideUp(1000)
            })
            slideToggleBtn.on('click',function(){
                box.slideToggle(1000)
            })
            
        </script>
    </body>
</html>

二、layui的懒加载效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <style type="text/css">
            p{
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="flow-default" id="LAY_demo1">
            <p>默认</p>
            <p>默认</p>
            <p>默认</p>
            <p>默认</p>
            <p>默认</p>
            <p>默认</p>
            <p>默认</p>
            <p>默认</p>
        </div>
        <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            layui.use('flow', function(){
              var flow = layui.flow;
                flow.load({
                    elem: '#LAY_demo1' //流加载容器
                    // ,scrollElem: '#LAY_demo1' //滚动条所在元素,一般不用填,此处只是演示需要。
                    ,end: '弹尽粮绝'
                    ,done: function(page, next){ //执行下一页的回调
                      //模拟数据插入
                      setTimeout(function(){
                        var lis = [];
                        for(var i = 0; i < 8; i++){
                          lis.push('<p>'+ ( (page-1)*8 + i + 1 ) +'</p>')
                        }
                        
                        //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
                        //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
                        next(lis.join(''), page < 3); //假设总页数为 3
                      }, 500);
                    }
                  });
              });
        </script>
    </body>
</html>

心得体会

​ 今天学习的内容不是很多,下午开始着手做项目,这次的项目时间很紧,希望可以在短时间内做出想达到的效果。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1