首页
所有分类
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学习之闭包分析
Dec 02 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
js实现微信聊天效果
Aug 09 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
vue-esign(1) pdfkit(1) bufio(1) 微信小程序(9) ipyvizzu(1) matplotlib(7) 可视化动图(1) Pillow(2) 条形图(1) 蒙特卡罗(1)
You might like
PHP实现变色验证码实例
2014/01/06 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Hotels.com香港酒店网：你的自由行酒店订房专家
2018/01/22 全球购物
BISSELL官网：北美吸尘器第一品牌
2019/03/14 全球购物
Happy Plugs官网：瑞典无线耳机品牌
2020/07/16 全球购物
为什么使用接口？
2014/08/13 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
在校学生职业规划范文
2014/01/08 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
销售口号大全
2014/06/11 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
导游词格式
2015/02/13 职场文书
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js