使用jQuery制作浮动工具栏的实例分享

2019/6/27 22:25:56

编程Tag： jQuery 工具栏浮动

本文主要是介绍使用jQuery制作浮动工具栏的实例分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

现在大家在浏览网站的时候，经常会发现一些浮动的条状栏，通常具有向上向下的功能，当你点击一下，就可以方便的回到顶部或者前往底部。其实打造这样一个工具边栏，并不是很难，使用jquery很容易就可以做出来。下面，你跟随我的步骤，一步一步的做一下，就可以做出来了，然后你可以根据这个代码，进行一些修改，自定义一些东西。

废话不多说，先说一下我做的这个工具边栏。这个工具边栏是符合我自己做的模板“Q21”，Q21模板的特点是黑白对比，所以这个工具边栏要突出黑白变化。经过构思之后，我决定这个边栏的样式是这样的：

2016513154338569.jpg (500×200)

当鼠标移动到“分享”按钮上之后，会自动滑出一个黑条，然后黑条上是各个分享按钮。具体的演示效果，你可以下载最后代码包查看。下面我们来开始动手一步一步的制作。

建立html结构

用span标签也行，不过我还是喜欢用div，所以就用div来建立html结构。结构很明确了吧，一个大div包含三个小div，分别是上中下三个按钮，其中分享按钮中，还需要再包含一个div，用来滑出分享按钮。好了，结构就建好了。

<div id=”tooltip” >
  <div id=”toolt”>▲</div>
  <div id=”toolc” >
    <div id=”sharetxt”>分享</div>
    <div id=”shareit” class=”none”>这里是分享代码</div>
  </div>
  <div id=”toolb”>▼</div>
</div>

注意，向上向下按钮，我使用的是字符，而不是图片。如果是图片的话，需要加载，而且动态变化，需要替换图片更加的不方便。至于如何打出这个上下两个三角号，就靠你的搜狗输入法了，如下图：

2016513154426944.jpg (561×457)

好了，有了html结构，我们再来定义一些css。

CSS代码

首先定义全局的字体

:root{font-family:”5FAE8F6F96C59ED1”,helvetica,Arial;}

经测试，这个边栏，在微软雅黑的字体下效果最好，所以要规定网页使用微软雅黑。上面这句代码，：root表示选择html根，对所有文档中的元素生效，其中5FAE8F6F96C59ED1表示的就是微软雅黑，至于为什么这样写而不写成“微软雅黑”，如果用户电脑是英文的，那肯定找不到微软雅黑这个字体，这样写法，只要有微软雅黑字体，就可以使用。
定位工具条位置

div[id=”tooltip”]{
  width:40px;
  height:120px;
  position:fixed;
  bottom:50%;
  right:20px;
  }

这几句css定义了工具边栏的高度和宽度，同时position：fixed表示让它固定在页面中，不会根据滚动条的滚动而移动。bottom：50%，让它保持在页面中部位置，right：20px表示让它距离右边20个像素。
响应操作

div[id^=”tool”]{
  font-size:38px;
  cursor:pointer;
  color:#000000;
  }
div[id^=”tool”]:hover{
  color:#999999;
  }

响应操作可以让工具更加人性化，例如上图效果，当我们把鼠标移动到箭头的时候，它会变成灰色，表示你已经把箭头移动到上面了。在这里，我使用了新型的选择器div[id^=”tool”]它的意思是，选取所有以tool开头的div标签。定义字体大小为38px，调整三角形成为合适大小。设定cursor：pointer属性，当你鼠标移动到上面的时候，会显示成手指形状，让你误以为是一个可以点击的链接。下面的语句，当你鼠标移动到上面的时候，颜色变成#999999。这是响应操作，提高用户体验。
中部CSS代码

div[id=”toolc”]{
  font-size:22px;
  float:right;
  width:40px;
  height:70px;
  overflow:hidden;
   }
div[id=”sharetxt”]{
width:26px;
margin-right:8px;
float:right;
height:70px;
display:inline;
margin-top:4px;
}
div[id=”shareit”]{
width:304px;
height:62px;
float:right;
height:30px;
margin:15px 0px;
}
.none{
display:none;
}
.inline{
display:inline;
}

比较简单，没有什么亮点，自己看看就行了。重点在于如何实现滑动出现分享按钮。我采用的方法是，定义两个div，浮动放置，其中分享按钮那个div默认是隐藏的，只有鼠标移动上去触发之后，它才会显示出来。

Jquery代码

在添加jquery代码之前，我们需要彻底理清滑出分享按钮的实现方式。jquery并没有提供横向滑动出现的方法，那要怎么实现呢？可以这样实现，先把底色变成黑色，让装载分享按钮的div框出现，但是这时候由于宽度不够显示分享按钮div，所以你暂时看不到。使用jquery的animate方法，让宽度逐渐变宽，直到完全显示分享按钮div。这样就会造成一个假象，黑色滑出，然后出现分享按钮。

具体的实现代码如下

$(function(){
  $(“#toolc”).mouseenter(function(){ //这里使用mouseenter方法来触发,当鼠标移动上去之后,触发这个方法
    $(“#toolc”).css({“color”:”#ffffff”,”backgroundColor”:”#000000”}); //先对中部添加背景,并且把文字变成白色
    $(“#shareit”).removeClass(“none”).addClass(“inline”); //去掉shareit的none,让它显示出来,但由于宽度不够,无法显示
    $(“#toolc”).animate({width:”350px”},200); //使用animate方法,动态的改变宽度,直到显示出来分享按钮
  }).mouseleave(function(){ //当鼠标从目标区域中移走,就触发下面这个事件
    $(“#toolc”).css({“color”:”#000000”,”backgroundColor”:”#ffffff”}); //同反
    $(“#shareit”).removeClass(“inline”).addClass(“none”); //同反
    $(“#toolc”).animate({width:”40px”},200); //同反,你懂的
  });
  $(“#toolt”).click(function(){
    $(“html,body”).animate({scrollTop:”-=900px”},200); //每点击一下,就向上滑动900px
  });
  $(“#toolb”).click(function(){
    $(“html,body”).animate({scrollTop:”+=900px”},200); //每点击一下,就向下滑动900px
  });
});

注释我已经写在上面代码中了，仔细耐心看一下。这里,我想说的是向上向下滑动900px。我并没有让它点击直接到顶部或者底部。因为我觉得，如果文章比较长，浏览者并不一定想直接滑动到底部，而是想看看下面的内容。如果他真想滑动到底部，也只需要点两次或者三次按钮即可。这也是一个用户体验的细节。

这篇关于使用jQuery制作浮动工具栏的实例分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

使用jQuery制作浮动工具栏的实例分享

相关编程文章