首页
所有分类
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 eval和JSON之间的联系
Dec 31 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Javascript中的async awai的用法
May 17 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
vue transition 在子组件中失效的解决
Nov 12 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
css3 (2) pycharm(6) JSON(10) MapReduce(1) Slice(1) linux(15) DFA(1) pygame(3) Qlabel(1) pyqt5(3)
You might like
php对数组排序的简单实例
2013/12/25 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
详解Vue.js 作用域、slot用法（单个slot、具名slot）
2019/10/15 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
js实现随机点名功能
2020/12/23 Javascript
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python机器学习之KNN分类算法
2018/08/29 Python
python基于event实现线程间通信控制
2020/01/13 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
阿里旅行：飞猪
2017/01/05 全球购物
三年大学自我鉴定
2014/01/16 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
高考寄语大全
2014/04/08 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
送给小学生的暑假礼物！小学生必背99首古诗
2019/07/02 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers