首页
所有分类
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中的apply()方法和call()方法使用介绍
Jul 25 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
canvas知识总结
Jan 25 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
详谈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
403(1) 滚动条(1) 声卡驱动(1) 404(1) 输入法(2) svg(1) Sunmao(1) Sentry(1) sout(1) 蓝屏(1)
You might like
在DC的漫画和电影中，蝙蝠侠的宿敌，小丑的真名是什么？
2020/04/09 欧美动漫
php xml-rpc远程调用
2008/12/19 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
微信支付扫码支付php版
2016/07/22 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
js href的用法
2010/05/13 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
详解pandas DataFrame的查询方法（loc,iloc,at,iat,ix的用法和区别）
2019/08/02 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
公积金具结保证书
2015/05/11 职场文书
员工离职证明范本
2015/06/12 职场文书
python 破解加密zip文件的密码
2021/04/22 Python