侧栏工具条开发

最新推荐文章于 2021-06-30 23:45:51 发布

qq_37418176

最新推荐文章于 2021-06-30 23:45:51 发布

阅读量531

点赞数 1

分类专栏： css javascript 文章标签： css javascript

本文链接：https://blog.csdn.net/qq_37418176/article/details/72860108

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

`一、用CSS实现工具条的动画效果`

`HTML`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <span class="toolbar-btn"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback">
            <span class="toolbar-btn"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <span class="toolbar-btn"></span>
        </a>
        <a id="backTop" href="javascript:;" class="toolbar-item toolbar-item-top">
            <span class="toolbar-btn"></span>
        </a>
    </div>
<script src="../../require.js" data-main="js/main"></script>
</body>
</html>

CSS

index.scss

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?hgqwru');
    src:  url('fonts/icomoon.eot?hgqwru#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?hgqwru') format('truetype'),
    url('fonts/icomoon.woff?hgqwru') format('woff'),
    url('fonts/icomoon.svg?hgqwru#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-wechat:before{
    content: "\e900";
}
.icon-mobile:before {
    content: "\e958";
}
.icon-bubble2:before {
    content: "\e96e";
}
.icon-arrow-up:before {
    content: "\ea32";
}
/*.toolbar-icon:after{
    font-family: 'icomoon';
    content: attr(data-icon);
}*/
@import "mixin";
@import "toolbar";

_mixin.scss

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}
@mixin transform-origin($origin){
    -webkit-transform-origin: $origin;
    -moz-transform-origin: $origin;
    -o-transform-origin: $origin;
    transform-origin: $origin;
}
@mixin scale($scale){
    -webkit-transform: scale($scale);
    -moz-transform: scale($scale);
    -o-transform: scale($scale);
    transform: scale($scale);
}
@mixin opacity($opacity){
    opacity: $opacity;
    filter: alpha(opacity=$opacity * 100);
}

_toolbar.scss



$toolbar-size: 52px;


.toolbar{
    position: fixed;
    left: 50%;
    bottom: 5px;
    width: $toolbar-size;
    margin-left: -$toolbar-size / 2;
}
.toolbar-item{
    position: relative;
    width: $toolbar-size;
    height: $toolbar-size;
    display: block;
    margin-top: 1px;

    &:after{ //QR code
        content: "";
        right: $toolbar-size - 4;
        bottom: -8px;
        background: url(../img/toolbar_img.png) no-repeat;
        position: absolute;
        width: 172px;
        @include opacity(0);
        @include scale(0.01);
        @include transform-origin(95% 95%);
        @include transition(all 1s);
    }
    &:hover{
        .toolbar-btn{
            &:before{
                top: -$toolbar-size;
            }
            &:after{
                top: 0;
            }
        }
        &:after{
            @include opacity(1);
            @include scale(1);
        }
    }
}
.toolbar-item-weixin{
    &:after{ //QR code
        content: "";
        height: 212px;
        background-position: 0 0;
    }
    .toolbar-btn{ //wecheck icon
        @extend .icon-wechat;
        &:after{ //wecheck text
            content: "sda\Adada";
        }
    }

}
.toolbar-item-feedback{
    .toolbar-btn{
        @extend .icon-bubble2;
        &:after{
            content: "daq\Aswa";
        }
    }
}
.toolbar-item-app{
    &:after{ //QR code
        content: "";
        height: 194px;
        background-position: 0 -222px;
    }
    .toolbar-btn{
        @extend .icon-mobile;
        &:after{
            content: "APPa\Adsaad";
        }
    }
}
.toolbar-item-top{
    .toolbar-btn{
        @extend .icon-arrow-up;
        &:after{
            content: "ads\Aadd";
        }
    }
}
.toolbar-btn{
    &,&:before,&:after{
        height: $toolbar-size;
        width: $toolbar-size;
        left: 0;
        position: absolute;
    }
    &:before,&:after{
        content: "";
        color: #fff;
        text-align: center;
        @include transition(top 1s);
    }
    overflow: hidden;
    top: 0;
    height: $toolbar-size;
    width: $toolbar-size;
    @extend [class^="icon-"];

    &:before{ //icon
        top: 0;
        background: #d0d6d9;
        line-height: $toolbar-size;
        font-size: 30px;

    }
    &:after{ //text
        top: $toolbar-size;
        background: #98a1a6;
        padding-top: 12px;
        line-height: 1.2;
        font-size: 12px;
        white-space: pre;
    }
}

二、使用 requirejs实现返回顶部效果

main.js

requirejs.config({
    paths: {
        jquery: '../../../jquery-3.2.1'
    }
});

requirejs(['jquery', 'backtop'], function ($, backtop) {
   /* new backtop.BackTop( $('#backTop'), {mode: 'move', pos: '200'});*/


    $('#backTop').backtop({mode: 'move', pos: '200'});
});

scrollto.js

define(['jquery'],function ($) {
    var ScrollTop = function (config) {
        this.opts = $.extend({},ScrollTop.DEFAULTS, config);
        this.$el = $('html');
    };
    ScrollTop.DEFAULTS = {
        dest: 0,
        speed: 800
    };

    ScrollTop.prototype.move = function () {
        var opts = this.opts,
            dest = opts.dest;
        if ($(window).scrollTop() !== dest) { //避免连续移动
            if (!this.$el.is(':animated')) {
                this.$el.animate({scrollTop: dest}, opts.speed);
            }
        }
    };
    ScrollTop.prototype.go = function () {
        var dest = this.opts.dest;
        if ($(window).scrollTop() !== dest) {
            this.$el.scrollTop(dest);
        }
    };

    return{
        ScrollTo: ScrollTop
    };
});

backtop.js

define(['jquery', 'scrollto'], function ($, scrollto) {
    function BackTop(el, config) {
        this.opts = $.extend({}, BackTop.DEFAULTS, config);
        this.$el = $(el);
        this.scroll = new scrollto.ScrollTo({dest: 100, speed: 2000});

        this._checkPosition();

        if (this.opts.mode === 'move') {
            this.$el.on('click', $.proxy(this._move, this)); //
        } else {
            this.$el.on('click', $.proxy(this._go, this));
        }
        $(window).on('scroll', $.proxy(this._checkPosition, this));
    }

    BackTop.DEFAULTS = {
        mode: 'move',
        pos : $(window).height()
    };
    BackTop.prototype._move = function () {
        this.scroll.move();
    };
    BackTop.prototype._go = function () {
        this.scroll.go();
    };
    BackTop.prototype._checkPosition = function () {
        if ($(window).scrollTop() > this.opts.pos) {
            this.$el.fadeIn();
        } else {
            this.$el.fadeOut();
        }
    };
    
    
    $.fn.extend({
        backtop: function (config) {
            return this.each(function () {
                new BackTop(this, config);
            });
        }
    });

    return{
        BackTop: BackTop
    }

});