实现侧边栏工具（1）使用背景图片方式

MkkHou 发布于2019-08-01 15:07 / 2268人阅读

摘要：新建中函数调用同样其他的属性也需要如此考虑。

需要开发类似于CSDN文章浏览右侧显示的工具条，如下所示

需要实现的效果如下：

1 HTML格式

主要原理利用a标签和图片的sprite来实现
创建一个toolbat类的工具条div
点击a标签不产生任何效果


    a[href="javascript:;"].toolbar-item.toolbat-item-app*4

完整代码，公共类toolbar-item用来设置相同的宽高，第一个app在鼠标hover时弹出二维码下载，在a标签中包含一个span标签，用来放置二维码

2 CSS样式

这里使用sass样式预编译工具来编写css样式，sass的具体使用另一篇文章中已经说过，参考 Sass和Compass学习笔记（1）
以下介绍将都在scss文件中编写
公共变量设置，工具条尺寸

/* 参数变量设置 */
$toolbar-width: 90px;
$toolbar-height: 28px;

外部统一工具条toolbar类设置

.toolbar{
    position: fixed;//工具条固定定位
    right: 10%;
    top: 50%;
}

a标签公共样式toolbar-item设置

/* 公共样式设置 */
.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    margin-top: 10px;
    z-index: 1000;
    transition: background-position 1s;
    /*鼠标hover时a标签下面的toolbar-layer二维码显示，透明度为1，兼容ie6,缩放大小为1*/
    &:hover{
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

内部标签定义样式

.toolbar-item-app{
    background-position: 0 0;
    &:hover{
        background-position: -100px 0;
    }
    
    .toolbar-layer{
        height: 112px;
        background-position: 0 -198px;
    }
}

.toolbar-item-feedback{
    background-position: 0 -33px;
    &:hover{
        background-position: -100px -33px;
    }
}
.toolbar-item-other{
    background-position: 0 -66px;
    &:hover{
        background-position: -100px -66px;
    }

    .toolbar-layer{
        height: 112px;
        background-position: 0 -198px;
    }
}
.toolbar-item-top{
    background-position: 0 -165px;
    &:hover{
        background-position: -100px -165px;
    }
}

二维码初始样式设置

.toolbar-layer{
    cursor: pointer;
    position: absolute;//相对于工具条绝对定位
    right: $toolbar-width;
    bottom:-1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    opacity: 0;//开始透明度为0
    filter: alpha(opacity=0);
    transform: scale(0.01);//初始大小为0.01，不可见
    z-index: 1000;
    transform-origin: right bottom;//从底部和右侧开始缩放
    transition: all 1s;
}

3 性能优化

可以将toolbar-item和toolbar-layer类相同的部分多带带提出

.toolbar-item, .toolbar-layer{
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;    
}

内部单个工具条栏目中有类似相同的代码

可以外部新建mixin统一模块

@mixin toolbar-item($x, $y, $hoverx, $hovery){
    background-position: $x $y;

    &:hover{
        background-position: $hoverx $hovery;
    }
}

函数调用

@include toolbar-item(0, 0, -100px, 0);

transition属于css3属性，需要考虑不同浏览器的兼容性，同样对transition进行封装。
新建mixin

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

.toolbar-item中函数调用

 @include transition(background-position 1s);

同样其他的CSS3属性也需要如此考虑。

GPU云服务器云服务器动态侧边栏显示隐藏侧边栏 html侧边栏 jquery侧边栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49778.html

实现侧边栏工具（2）使用图标字体方式

摘要：前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具使用背景图片方式，可以看出这种方式的优缺点是结构简单，容易阅读和理解使用图片浏览器兼容性好，可以兼容等低版本浏览器缺点就是使用了大量的图片，对性能有一定的影响，并且不利于前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具（1）使用背景图片方式，可以看出这种方式的优缺点是 HTML结构简单，容易...

kycool 2019-08-21 13:33 评论0 收藏0
实现侧边栏工具（2）使用图标字体方式

摘要：前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具使用背景图片方式，可以看出这种方式的优缺点是结构简单，容易阅读和理解使用图片浏览器兼容性好，可以兼容等低版本浏览器缺点就是使用了大量的图片，对性能有一定的影响，并且不利于前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具（1）使用背景图片方式，可以看出这种方式的优缺点是 HTML结构简单，容易...

Yangder 2019-08-01 15:07 评论0 收藏0
实现侧边栏工具（1）使用背景图片方式

摘要：新建中函数调用同样其他的属性也需要如此考虑。需要开发类似于CSDN文章浏览右侧显示的工具条，如下所示showImg(http://7xpaol.com1.z0.glb.clouddn.com/QQ%E6%88%AA%E5%9B%BE20151223203348.jpg); 需要实现的效果如下：showImg(http://7xpaol.com1.z0.glb.clouddn.com/...

booster 2019-08-21 13:33 评论0 收藏0
flutter实战1：完成一个有侧边栏的主界面

摘要：侧边栏我们先图解一下侧边栏的结构整个侧边栏主从上到下按区块分别放置了账号和若干功能项分割线的列表，很容易想到使用布局控件。账号信息区域中有账号头像粉丝头像账号文字信息和背景图，这块我们可以使用控件库的控件实现。经过2周的学习，看过笔记1-8的小伙伴们已经有不少开始自己写APP了，我也按耐不住这股热情，想要自己开发个APP玩玩，so，从本篇起，仿造一个APP，项目从0开始，每篇增加一些...

孙淑建 2019-08-26 11:50 评论0 收藏0
纯CSS实现侧边栏/分栏高度自动相等

摘要：一为何要分栏高度一致分栏高度一致的目的是更加美观。二纯实现侧边栏分栏高度自动相等这里直接介绍我认为的最佳的侧边栏分栏高度自动相等方法。一、为何要分栏高度一致？分栏高度一致的目的是更加美观。举两个例子吧。 ① 对于分栏布局，我们或许会用边框(border)进行分隔，就如鄙人博客的分栏：边框分栏张鑫旭-鑫空间-鑫生活此时最担心的问题就是高度不一致，尤其是无边框属性的分栏高度超过有边框...

li21 2019-08-29 12:43 评论0 收藏0