首页
所有分类
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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
javascript html5实现表单验证
Mar 01 Javascript
JavaScript算法系列之快速排序（Quicksort）算法实例详解
Sep 04 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
js实现无限瀑布流实例方法
Sep 16 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
工作总结(1972) 报告(147) 党团范文(807) 计划(88) 开幕词(63) 汇报材料(247) 闭幕词(9) 导游词(322) 慰问信(53) 口号(179)
You might like
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
Ubuntu下安装PyV8
2016/03/13 Python
python中pandas.DataFrame的简单操作方法（创建、索引、增添与删除）
2017/03/12 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
英国领先的露营和露营车品牌之一：OLPRO
2019/08/06 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
女大学生自我鉴定
2013/12/09 职场文书
文员求职信
2014/07/15 职场文书
合作协议书模板
2014/10/10 职场文书
2015年元旦标语大全
2014/12/09 职场文书
起诉意见书范文
2015/05/19 职场文书
python字符串常规操作大全
2021/05/02 Python
Python机器学习之逻辑回归
2021/05/11 Python
HTML基本元素标签介绍
2022/02/28 HTML / CSS