组件方式开发 Web App全站-3

最新推荐文章于 2019-05-24 13:43:08 发布

侠客岛的含笑

最新推荐文章于 2019-05-24 13:43:08 发布

阅读量750

点赞数

分类专栏：前端组件化入门文章标签： web app jquery 函数 css3 jquery插件

本文链接：https://blog.csdn.net/qq_33936481/article/details/69377930

版权

前端组件化入门专栏收录该内容

9 篇文章 1 订阅

订阅专栏

静态页验证
1. 页切换：fullPage.js（jQuery插件）
2. 组件切换：入场，出场动画
3. 注意问题：DOM事件循环无限传播
这里写图片描述
http://www.uedsc.com/fullpage.html
主要功能
1. 支持鼠标滚动
2. 支持前进后退和键盘控制
3. 多个回调函数
4. 支持手机、平板触摸事件
5. 支持 CSS3 动画
6. 支持窗口缩放
7. 窗口缩放时自动调整
8. 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
9. fullPage.js 支持 IE8+ 及其他现代浏览器。
使用方法
1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

3、JavaScript

$(function(){
    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        'navigation': true,
        'navigationPosition': 'right',
        'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
    })
})

每一个页面的Div都要设置class=”section”

<!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 type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .component{
            width: 50%;
            height: 50px;
            margin-bottom: 20px;
            background-color: #eee; 
        }
    </style>

    <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>

    <script type="text/javascript">

        $(function (){
            $('#h5').fullpage({

                'sectionsColor': ['#254875','#00ff00','#254587','#695684'],
                onLeave:function(index,nextIndex,direction){
                    // debugger
                    $('#h5').find('.page').eq(index).trigger('onLeave')
                },
                afterLoad:function(anchorLink,index){
                    // debugger
                     $('#h5').find('.page').eq(index-1).trigger('onLoad')
                }
            });

            $('.page').on('onLeave',function(){
                console.log($(this).attr('id'),'===>','onLeave');
            })
            $('.page').on('onLoad',function(){
                console.log($(this).attr('id'),'===>','onLoad');
            })
        });

    </script>

    <body>
    <!-- 用于验证 fullpage.js 切换页面，以及内容组织结构可用，组件能够进行动画 -->

        <div id="h5">
            <div class="page section" id="page-1">
                <div class="component log">logo</div>
                <div class="component slogan">logan</div>
            </div>
            <div class="page section" id="page-2">
                <div class="component log">dds</div>
                <div class="component desc">dds</div>
            </div>
            <div class="page section" id="page-3">
                <div class="component bar">dds</div>
                <div class="component desc">dds</div>
            </div>
            <div class="page section" id="page-3">
            </div>
        </div>
    </body>

</html>

这里写图片描述
当页面切换时，OK

组件切换

            //组件切换 // 渐隐渐现
            $('.conponent').on('onLoad',function(){
                $(this).fadeIn();

            })
            $('.conponent').on('onLeave',function(){
                $(this).fadeOut();

            })

这里写图片描述
然后我们把这段代码写入$(‘.page’)

这里写图片描述

无限增加->卡死
page->component->page->componment………

$('.page').on('onLeave',function(){
                console.log($(this).attr('id'),'===>','onLeave');
                $(this).find('.component').trigger('onLeave');
            })
            $('.page').on('onLoad',function(){
                console.log($(this).attr('id'),'===>','onLoad');
                 $(this).find('.component').trigger('onLoead');
            });

所以我们在这里可以把trigger换成triggerHandler.或者是在.component函数里增加

return false，执行完不要再向上传播

侠客岛的含笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件方式开发 Web App全站-3

静态页验证 1. 页切换：fullPage.js（jQuery插件） 2. 组件切换：入场，出场动画 3. 注意问题：DOM事件循环无限传播 http://www.uedsc.com/fullpage.html 主要功能 1. 支持鼠标滚动 2. 支持前进后退和键盘控制 3. 多个回调函数 4. 支持手机、平板触摸事件 5. 支持 CSS3 动画 6. 支持
复制链接

扫一扫

专栏目录