首页 > 代码库 > web组件化开发第一天

web组件化开发第一天

2024-09-05 21:59:46   220人阅读

 

技术选型

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="http://www.mamicode.com/js/lib/jquery.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/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;
            })


        });

 

web组件化开发第一天


联系
我们