zoukankan      html  css  js  c++  java
  • web组件化开发第一天

    技术选型

    html5 css3 jq

    应用的插件

    FullPage.js

    一、建一个测试页面,测试静态的功能

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    
        <title>慕课网2015课程学习情况</title>
        <style>
            body{
                margin:0;
                padding:0;
            }
            .component{
                width: 50%;
                height:50px;
                margin-bottom:20px;
                background-color: red;
                display: none;
            }
        </style>
    
        <body>
        <!-- 用于验证 fullpage.js 切换页面,以及内容组织结构可用,组件能够进行动画 -->
    
            <div id="h5">
      <!-- 给每个需要翻页的页面添加section类 给定不同的ID -->
                <div class="page section" id="page-1">
                    <div class="component">logo</div>
                    <div class="component slogan">slogan</div>
                </div>
                <div class="page section" id="page-2">
                    <div class="component">logo</div>
                    <div class="component slogan">slogan</div>
                </div>
                <div class="page section" id="page-3">
                    <div class="component">logo</div>
                    <div class="component slogan">slogan</div>
                </div>
            </div>
    
        </body>
    
    </html>

    二、首先载入fullpage.js

       <script type="text/javascript" src="../js/lib/jquery.js"></script>
        <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>

    三、测试功能是否完好。

    $(function (){
                $('#h5').fullpage({
                        //传入背景色 sectionsColor 后面接对象。
                        'sectionsColor': ['#254875', '#00ff00', '#245874'],
                        /*
                        * 传入回掉函数 onLeave afterLoad
                        * afterLoad
                        * 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,
                        * anchorLink 是锚链接的名称,index 是序号,从1开始计算
                        * onLeave
                        * 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:
                        * index 是离开的“页面”的序号,从1开始计算;
                        * nextIndex 是滚动到的“页面”的序号,从1开始计算;
                        * direction 判断往上滚动还是往下滚动,值是 up 或 down。
                        * */
                        onLeave: function (index, nextIndex, direction) {
                            //让page执行onLeave事件。
                            $('#h5').find('.page').eq(index-1).trigger('onLeave');
                        },
                        afterLoad: function (anchorLink, index) {
                            //让page执行onLoad事件。
                            $('#h5').find('.page').eq(index-1).trigger('onLoad');
    
                        },
    
                    });
                 //给page页面绑定onLeave事件。
                $('.page').on('onLeave',function () {
                    console.log($(this).attr('id'),'====>','onleave');
                    //让component执行onLeave事件。
                    $(this).find('.component').trigger('onLeave');
                })
                //给page页面绑定onLoad事件。
                $('.page').on('onLoad',function () {
                    console.log($(this).attr('id'),'====>','onLoad');
                    //让component执行onLoad事件。
                    $(this).find('.component').trigger('onLoad');
                })
                //给component页面绑定onLoad事件。
                $('.component').on('onLoad',function () {
                    $(this).fadeIn();
                    //防止事件冒泡。循环传播。
                    return false;
                })
                //给component页面绑定onLeave事件。
                $('.component').on('onLeave',function () {
                    $(this).fadeOut();
                    return false;
                })
    
    
            });
  • 相关阅读:
    多元隐函数组求导快速判断自变量和因变量
    jQuery通过ajax方法获取json数据不执行success的原因及解决方法
    JS对于字符串的切割截取
    PHPStorm 解决报错:com.mysql.cj.exceptions.InvalidConnectionAttributeException
    点击checkbox后,$(this).attr('checked')得到的值不会发生改变
    phpstudy等php本地环境运行缓慢的问题解决方法
    HTML5跳转页面并传值以及localStorage的用法
    Js与jQuery的相互转换
    PhpStorm代码编辑区竖线的用途以及如何去掉
    PhpStorm 运行出现502 Bad Gateway
  • 原文地址:https://www.cnblogs.com/vivenZ/p/6440663.html
Copyright © 2011-2022 走看看