热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

侧边工具条实现scss+requirejs(1)

慕课上的一个案例,刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊,拖了好久好久哦。三种html的布局以及优缺点:+

慕课上的一个案例,刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊,拖了好久好久哦。

) no-repeat; } .toolbar-item{ width:100%; height: $toolbar-size; display: block; position: relative; margin-top: 1px; @include transition(all ease-in-out 0.5s); &:hover{ .toolbar-layer{ @include opacity(1); @include scale(scale(1)); @include transform-origin(95% bottom); @include transition(all ease-in-out 1s); } @include transition(all ease-in-out 0.5s); } } .toolbar-item-weixin { @include toolbar-item(0 -798px,0 -860px); .toolbar-layer{ height:212px; background-position:0 0; } } .toolbar-item-feedback{ @include toolbar-item(0 -426px,0 -488px); } .toolbar-item-app{ @include toolbar-item(0 -550px,0 -612px); .toolbar-layer{ height:194px; background-position:0 -222px; } } .toolbar-item-top{ @include toolbar-item(0 -674px,0 -736px); // display: none; } .toolbar-layer{ width: 172px; position: absolute; right: $toolbar-size - 6; bottom: -10px; @include opacity(0); @include scale(scale(0.01)); @include transform-origin(95% bottom); @include transition(all ease-in-out 1s); }

通过requirejs,jq实现功能 (这里主要是回到顶部的功能

+ 通过script标签引入requirejs,然后并引入入口文件main.js
+ 通过config给一些引用设置别名,比如对于jquery-2.1.1.min设置为jquery
+ 引入模块,这里指jquery
// 通过config给一些引用设置别名
requirejs.config({
    //注意paths写法,我已经栽了两次跟头了
    paths:{
        jquery:'jquery-2.1.1.min'
    }
});

// 引入模块,并通过一个变量表示引入模块,惯例用$
requirejs(['jquery'],function($){
    //移动函数,可以通过设置移动时间来改变交互效果
    $('#backTop').on('click',move);
    //判断返回顶部按钮是否出现,传入当前窗口高度,当滚动高度大于当前窗口高度时,显示按钮
    //特别注意,每次滚动的时候需要判断,以及初始化页面的时候需要判断
    $(window).on('scroll',function(){
        checkPosition($(window).height());
    });
    //这个缺点是反应很慢TOT,所以需要在css上设置一个初始化display为none
    checkPosition($(window).height() / 2);

    function move(){
        $('body,html').animate({
            scrollTop:0
        },500,'linear');
    }

    function checkPosition(Pos){
        if($(window).scrollTop() > Pos){
            $('#backTop').show();
        }else{
            $('#backTop').hide();
        }
    }
});

推荐阅读
author-avatar
流域
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有