使用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 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
Vue官方文档梳理之全局配置
Nov 22 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue实例的选项总结
Jun 09 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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版(1)
2006/10/09 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php实现的递归提成方案实例
2015/11/14 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
毕业生求职的求职信
2013/12/05 职场文书
采购助理岗位职责
2014/02/16 职场文书
科研课题实施方案
2014/03/18 职场文书
推广普通话演讲稿
2014/05/23 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技