首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现常见的工具条效果

Posted in Javascript onMarch 02, 2017

实现功能如下：

1. 二维码展示功能；

2. “回到顶部”功能。(选择“全屏预览”，滑动滚动条，查看回到顶部功能)

效果图：

js实现常见的工具条效果

图(1) 初始效果

js实现常见的工具条效果

图(2) 鼠标悬浮效果

实例代码：

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>工具条</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
 body{
 background-color:#69C;
 }
 .toolbar{
 position:fixed;
 left:50%;
 bottom:5px;
 margin-left:-26px;
 }
 .toolbar-item{
 position:relative;
 display:block;
 width:52px;
 height:52px;
 background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201703/01/160208u95waa2sfwt27hwh.png);
 background-repeat:no-repeat;
 margin-top:1px;
 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 -ms-transition:background-position 1s;
 -o-transition:background-position 1s;
 transition:background-position 1s;
 }
 .toolbar-item-wenxin{
 background-position:0 -798px;
 }
 .toolbar-item-wenxin:hover{
 background-position:0 -860px;
 }
 .toolbar-item-feedback{
 background-position:0 -426px;
 }
 .toolbar-item-feedback:hover{
 background-position:0 -488px;
 }
 .toolbar-item-app{
 background-position:0 -550px;
 }
 .toolbar-item-app:hover{
 background-position:0 -612px;
 }
 .toolbar-item-top{
 background-position:0 -674px;
 }
 .toolbar-item-top:hover{
 background-position:0 -736px;
 }
 .toolbar-layer{
 position:absolute;
 right:46px;
 bottom:-10px;
 width:172px;
 background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201703/01/160208u95waa2sfwt27hwh.png);
 background-repeat:no-repeat;
 opacity:0;
 filter:alpha(opacity=0);
 -webkit-transform-origin:95% 95%;
 -moz-transition-origin:95% 95%;
 -ms-transition-origin:95% 95%;
 -o-transition-origin:95% 95%;
 transform-origin:95% 95%;
 -webkit-transition:scale(0.01);
 -moz-transition:scale(0.01);
 -ms-transition:scale(0.01);
 -o-transition:scale(0.01);
 transform:scale(0.01);
 -webkit-transition:all 1s;
 -moz-transition:all 1s;
 -ms-transition:all 1s;
 -o-transition:all 1s;
 transition:all 1s;
 }
 .toolbar-item-wenxin .toolbar-layer{
 height:212px;
 background-position:0 0;
 }
 .toolbar-item-app .toolbar-layer{
 height:194px;
 background-position:0 -222px;
 }
 .toolbar-item:hover .toolbar-layer{
 opacity:1;
 filter:alpha(opacity=100);
 -webkit-transition:scale(1);
 -moz-transition:scale(1);
 -ms-transition:scale(1);
 -o-transition:scale(1);
 transform:scale(1);
 }
</style>
<script type="text/javascript">
 $(window).on('load',function(){
 $('#backTop').on('click',go);
 $(window).on('scroll',function(){
  checkPosition($(window).height());
 }); 
 checkPosition($(window).height());//防止刚开始刷新页面，返回顶部没有隐藏的问题，先让它执行一次，使其fadeOut
 })
 //到达顶部
 function go(){
 $('html,body').scrollTop(0);
 }
 //检测位置
 function checkPosition(pos){
 if($(window).scrollTop() > pos){
  $('#backTop').fadeIn();//滚动超过一个屏的宽度，就显示
 }else{
  $('#backTop').fadeOut();
 }
 }
</script>
</head>
<body>
  <div class="toolbar">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-wenxin">
      <span class="toolbar-layer"></span>
    </a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-feedback"></a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-app">
      <span class="toolbar-layer"></span>
    </a>
    <a id="backTop" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-top">
    </a>
  </div>
  <!--出现滚动条-->
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现常见的工具条效果

- Author -

ywhluck

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
webpack实现热更新（实施同步刷新）
Jul 28 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
jQuery给表格添加分页效果
Mar 02 #Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 #Javascript
Bootstrap Scrollspy源码学习
Mar 02 #Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 #Javascript
jQuery实用密码强度检测
Mar 02 #Javascript
通过npm引用的vue组件使用详解
Mar 02 #Javascript
子查询(1) el-table(1) frozenset(1) mounted(1) TableField(1) set(1) Next.js(1) Mybatis-Plus(3) create(1) 脚手架(2)
You might like
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php使用PDO方法详解
2014/12/27 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
Javascript typeof 用法
2008/12/28 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
JavaScript运动框架 链式运动到完美运动（五）
2017/05/18 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python基础入门之seed()方法的使用
2015/05/15 Python
Python三级目录展示的实现方法
2016/09/28 Python
python安装教程
2018/02/28 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python scatter函数用法实例详解
2020/02/11 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
凯特·丝蓓英国官网：Kate Spade英国
2016/11/07 全球购物
法国票务网站：Ticketmaster法国
2018/07/09 全球购物
巴基斯坦购物网站：Goto
2019/03/11 全球购物
感恩节寄语2015
2015/03/24 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
游戏《铁拳》动画化！2022年年内播出
2022/03/21 日漫
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技