使用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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php实现的http请求封装示例
2016/11/08 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
树莓派升级python的具体步骤
2020/07/05 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
详解Anaconda 的安装教程
2020/09/23 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
利群广告词
2014/03/20 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫