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


Posted in Javascript onMay 13, 2016

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

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

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

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

建立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>

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

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

好了,有了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。我并没有让它点击直接到顶部或者底部。因为我觉得,如果文章比较长,浏览者并不一定想直接滑动到底部,而是想看看下面的内容。如果他真想滑动到底部,也只需要点两次或者三次按钮即可。这也是一个用户体验的细节。

Javascript 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
Vue实现购物车功能
Apr 27 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
vue 实现走马灯效果
Oct 28 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
浅析JS操作DOM的一些常用方法
May 13 #Javascript
javascript判断图片是否加载完成的方法推荐
May 13 #Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 #Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 #Javascript
Javascript基础之数组的使用
May 13 #Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 #Javascript
BootStrap扔进Django里的方法详解
May 13 #Javascript
You might like
php导出excel格式数据问题
2014/03/11 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python实现简单温度转换的方法
2015/03/13 Python
Python的动态重新封装的教程
2015/04/11 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python图像处理之反色实现方法
2015/05/30 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
Java基础知识面试要点
2016/07/29 面试题
VC++笔试题
2014/10/13 面试题
师范生自荐信模板
2014/05/28 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript