码迷，mamicode.com
首页 > 其他好文 > 详细

侧栏工具条开发

时间：2016-05-12 20:22:57      阅读：200      评论：0      收藏：0      [点我收藏+]

标签：

侧栏工具条开发

最终的效果如下：
技术分享

使用背景图片的方式

页面的布局为div嵌套a标签，对于有弹出视图的，在a标签中，再添加span标签。
通过设置a标签的背景图片来实现。详情见css代码。

这样做的优点和缺点：

  • HTML结构简单
  • 兼容性良好，可以兼容到IE6
  • 使用了大量图片，对性能有一定的影响，并且不利于修改
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>

    <div class="toolbar">
        <!-- 微信-->
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <!-- 二维码-->
            <span class="toolbar-layer"></span>
        </a>
        <!-- 意见反馈-->
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
        <!-- app下载-->
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <!-- 二维码-->
            <span class="toolbar-layer"></span>
        </a>
        <!-- 返回顶部-->
        <a href="javascript:;" class="toolbar-item toolbar-item-top"></a>
    </div>

    <script src="js/require.js" data-main="js/main"></script>
</body>
</html>

css采用的为sass。
index.scss代码如下：

@import "mixin";
@import "toolbar";

_mixin.scss代码如下，主要使用了混合器@mixin

@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;
  -ms-transform-origin: $origin;
  -o-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin scale($scale){
  -webkit-transform: scale($scale);
  -moz-transform: scale($scale);
  -ms-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-item, .toolbar-layer{
  //背景图片
  background-image: url("../img/toolbar.png");
  background-repeat: no-repeat;
}

@mixin  toolbar-item($pos, $hoverPos){
  background-position: 0 $pos;

  &:hover {
    background-position: 0 $hoverPos;
  }
}


.toolbar{
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}
.toolbar-item{
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  margin-top: 1px;
  //过渡
  //transition: background-position 1s;
  @include transition(background-position 1s);

  //鼠标进入的时候，显示
  &:hover{
    .toolbar-layer{
      //opacity: 1;
      //filter: alpha(opacity=100);
      //transform: scale(1);
      @include opacity(1);
      @include scale(1);
    }
  }
}

//微信
.toolbar-item-weixin{

  @include  toolbar-item(-798px, -860px);

  .toolbar-layer{
    height: 212px;
    background-position: 0 0;
  }
}
.toolbar-item-feedback{

  @include  toolbar-item(-426px, -488px);

}
//app下载
.toolbar-item-app{

  @include  toolbar-item(-550px, -612px);

  .toolbar-layer{
    height: 194px;
    background-position: 0 -222px;
  }
}
.toolbar-item-top{
  @include  toolbar-item(-674px, -736px);
}
.toolbar-layer{
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  width: 172px;
  //透明度为0
  //opacity: 0;
  //filter: alpha(opacity=0);
  @include opacity(0);
  //transform-origin: 95% 95%;
  @include transform-origin(95% 95%);
  //transform: scale(0.01);
  @include scale(0.01);
  //过渡
  //transition: all 1s;
  @include transition(all 1s);
}

使用图标字体的方式

图标字体可以在icomoon下载
页面布局，基本结构如下：

        <a href="javascript:;" class="toolbar-item">
            <span class="toolbar-btn">
                <i class="toolbar-icon icon-wechat"></i>
                <span class="toolbar-text">公众<br/>账号</span>
            </span>
            <span class="toolbar-layer toolbar-layer-weixin"></span>
        </a>

<i>显示的是图标字体，最后一个<span>显示的是二维码。
完整结构如下：

    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <span class="toolbar-btn">
                <i class="toolbar-icon icon-wechat"></i>
                <span class="toolbar-text">公众<br/>账号</span>
            </span>
            <span class="toolbar-layer toolbar-layer-weixin"></span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <span class="toolbar-btn">
                <i class="toolbar-icon icon-bubble"></i>
                <span class="toolbar-text">意见<br/>反馈</span>
            </span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <span class="toolbar-btn">
                <i class="toolbar-icon icon-mobile"></i>
                <span class="toolbar-text">APP<br/>下载</span>
            </span>
            <span class="toolbar-layer toolbar-layer-app"></span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <span class="toolbar-btn">
                <i class="toolbar-icon icon-arrow-up2"></i>
                <span class="toolbar-text">返回<br/>顶部</span>
            </span>
        </a>

    </div>

优点、缺点及兼容性

  • 避免了图片的使用，节约了性能，并且修改方便
  • HTML结构稍显复杂
  • 不兼容IE6和IE7

index.scss的内容如下，主要是加入了图标字体的样式：

@font-face {
  font-family: ‘icomoon‘;
  src:    url(‘fonts/icomoon.eot?djq5cn‘);
  src:    url(‘fonts/icomoon.eot?djq5cn#iefix‘) format(‘embedded-opentype‘),
  url(‘fonts/icomoon.ttf?djq5cn‘) format(‘truetype‘),
  url(‘fonts/icomoon.woff?djq5cn‘) format(‘woff‘),
  url(‘fonts/icomoon.svg?djq5cn#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: "\e901";
}
.icon-bubble:before {
  content: "\e902";
}
.icon-arrow-up2:before {
  content: "\e903";
}



@import "mixin";
@import "toolbar";

_toolbar.scsscss代码如下：

$toolbar-size: 52px;

.toolbar-item, .toolbar-btn, .toolbar-icon, .toolbar-text
{
  width: $toolbar-size;
  height: $toolbar-size;
}
.toolbar-icon, .toolbar-text
{
  position: absolute;
  left: 0;
  color: #fff;
  text-align: center;
  @include transition(top 1s);
}

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

  //hover状态
  &:hover{
    .toolbar-icon{
      top:-$toolbar-size;
    }
    .toolbar-text{
      top:0;
    }
    .toolbar-layer{
      @include opacity(1);
      @include scale(1);
    }
  }

}
.toolbar-btn{
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
//图标
.toolbar-icon{
  top: 0;
  background-color: #d0d6d9;
  font-size: 30px;
  line-height: $toolbar-size;
}
//文字
.toolbar-text{
  top: $toolbar-size;
  background-color: #98a1a6;
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.2;
}
//二维码
.toolbar-layer{
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  width: 172px;
  background-image: url("../image/toolbar_img.png");
  background-repeat: no-repeat;
  @include opacity(0);
  @include scale(0.01);
  @include transform-origin(95% 95%);
  //过渡
  @include transition(all 1s);
}
.toolbar-layer-weixin{
  height: 212px;
  background-position: 0 0;
}
.toolbar-layer-app {
  height: 194px;
  background-position: 0 -222px;
}

利用before和after伪类的方式

利用伪类简化html的结构，html代码如下：

    <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 href="javascript:;" class="toolbar-item toolbar-item-top">
            <span class="toolbar-btn"></span>
        </a>
    </div>

优点、确定及兼容性

  • 避免了图片的使用，节约了性能，并且修改方便
  • HTML结构简单，但CSS稍显复杂
  • 不兼容IE6和IE7

主要改动是是_toolbar.scss样式：

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

  //hover
  &:hover{
    .toolbar-btn{
      &:before{
        top:-$toolbar-size;
      }
      &:after{
        top: 0;
      }
    }
    //显示二维码
    &:after{
      @include opacity(1);
      @include scale(1);
    }
  }

  //二维码
  &:after{
    content: "";
    position: absolute;
    right: $toolbar-size - 6;
    bottom: -10px;
    width: 172px;
    background-image: url("../image/toolbar_img.png");
    background-repeat: no-repeat;
    @include opacity(0);
    @include transform-origin(95% 95%);
    @include scale(0.01);
    //过渡
    @include transition(all 1s);
  }
}


.toolbar-btn{
  position: absolute;
  left: 0;
  top: 0;
  width: $toolbar-size;
  height: $toolbar-size;
  //重要
  overflow: hidden;


  //图标字体公共样式
  font-family: ‘icomoon‘;
  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;

  //图标字体
  &:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-size;
    height: $toolbar-size;
    background-color: #d0d6d9;
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: $toolbar-size;
    @include transition(top 1s);
  }
  //文字
  &:after{
    content: "";
    position: absolute;
    left: 0;
    top: $toolbar-size;
    width: $toolbar-size;
    height: $toolbar-size;
    background-color: #98a1a6;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    padding-top: 12px;
    @include transition(top 1s);
    white-space: pre;
  }
}

//微信
.toolbar-item-weixin{
  &:after{
    content: "";
    height: 212px;
    background-position: 0 0;
  }
  .toolbar-btn{
    &:before{
      content: "\e900";
    }
    &:after{
      content: "公众\A账号";
    }
  }
}


.toolbar-item-feedback{
  .toolbar-btn{
    &:before{
      content: "\e902";
    }
    &:after{
      content: "意见\A反馈";
    }
  }
}

//app
.toolbar-item-app{
  &:after{
    content: "";
    height: 194px;
    background-position: 0 -222px;
  }

  .toolbar-btn{
    &:before{
      content: "\e901";
    }
    &:after{
      content: "app\A下载";
    }
  }
}

.toolbar-item-top{
  .toolbar-btn{
    &:before{
      content: "\e903";
    }
    &:after{
      content: "返回\A顶部";
    }
  }
}

小技巧
content内容换行，请参考：Add line break to :before or :after pseudo-element content

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

返回顶部JS代码

在body标签的底部引入JS，这里使用到了require.js

<script src="js/require.js" data-main="js/main"></script>

main.js代码如下：

requirejs.config({
    paths: {
        jquery: ‘jquery-2.1.4.min‘
    }
})

requirejs([‘jquery‘], function ($) {
    //点击事件
    $(‘#backTop‘).on(‘click‘, move);
    //检查位置事件
    $(window).on(‘scroll‘, function(){
        checkPosition($(window).height());
    });

    checkPosition($(window).height());

    function move() {
        $(‘html,body‘).animate({
            scrollTop : 0
        },800);
    }

    function go() {
        $(‘html,body‘).scrollTop(0);
    }

    function checkPosition(pos) {
        if($(window).scrollTop() > pos){
            $(‘#backTop‘).fadeIn();
        }else{
            $(‘#backTop‘).fadeOut();
        }
    }

})

将功能抽象成模块

侧栏工具条开发

标签：

原文地址：http://blog.csdn.net/winfredzen/article/details/51332572
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！