首页
所有分类
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获取单选按钮的数据
Nov 27 Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue使用watch监听属性变化
Apr 30 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
绝对定位(1) postcss-px2rem(1) props(1) mixin(1) 游标(1) ref(1) ECharts(3) GTID(1) ip连接(1) 相对定位(1)
You might like
一台收音机，让一家人都笑逐颜开！
2020/08/21 无线电
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
YII框架常用技巧总结
2019/04/27 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
pandas的resample重采样的使用
2020/04/24 Python
css3弹性盒模型（Flexbox）详细介绍
2014/10/08 HTML / CSS
理肤泉俄罗斯官网：La Roche-Posay俄罗斯
2018/07/24 全球购物
小学教师寄语大全
2014/04/03 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
工作保证书范文
2014/04/29 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
优质服务标语口号
2015/12/26 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
创业计划书之家政服务
2019/09/18 职场文书
关于拾金不昧的感谢信（五篇）
2019/10/18 职场文书
python编写函数注意事项总结
2021/03/29 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android