首页
所有分类
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 相关文章推荐
你的编程语言可以这样做吗？
Sep 07 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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) AOP(2) 构造函数(1) PyAutoGUI(1) 继承(1) redis(3) gRPC(3) promise(2) XDM(3) 验证表达式(1)
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
Express.JS使用详解
2014/07/17 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python中zip和unzip数据的方法
2015/05/27 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python分布式编程实现过程解析
2019/11/08 Python
python操作cfg配置文件方式
2019/12/22 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
爱奇艺VIP会员：大剧抢先看
2018/07/11 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
《称象》教学反思
2014/04/25 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
推荐信范文大全
2015/03/27 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL