纯js实现悬浮按钮组件


Posted in Javascript onDecember 17, 2016

先上效果

纯js实现悬浮按钮组件

下面附上代码 使用方式很简单只需要 在页面引入这段js 即可

$(()=> {
 let param = {
  tag: true,
  num: 1,
  ele: document.createElement('div'),
  icon: '',
  homeIcon: '',
  moreIcon: '',
  personalIcon: '',
  closeIcon: '',
  distance: '500',
  css: "position:fixed;" +
  "bottom:4rem;" +
  "box-shadow:10px 10px 10px gray;" +
  "right:10px;" +
  "display:none;" +
  "font-size:1.5rem;" +
  "color:#fff;" +
  "z-index:1000;" +
  "height:2.5rem;" +
  "width:2.5rem;" +
  "background:#f44336;" +
  "border-radius:50%;" +
  "line-height:2.5rem;" +
  "text-align:center",
  menuCss: "position:absolute;" +
  // "bottom:3rem;" +
  "display:none;" +
  "box-shadow:10px 10px 10px gray;" +
  "font-size:1.2rem;" +
  "color:#fff;" +
  "background:orange;" +
  "height:2rem;" +
  "width:2rem;" +
  "border-radius:50%;" +
  "text-align:center;" +
  "line-height:2rem;"
  // type: '#top'
 };

 {
  document.querySelector('body').appendChild(((ele)=> {
   ele.className = 'scroll iconfont';
   ele.innerHTML = param.moreIcon;
   // ele.href = param.type;
   ele.style.cssText = param.css;
   for (let i = 0; i < 3; i++) {
    let menu_personal = document.createElement('a');
    menu_personal.className = 'iconfont';
    menu_personal.style.cssText = param.menuCss;

    switch (i) {
     case 0:
      setStyle(menu_personal, '#2196f3', '2.4rem', '2.4rem', param.homeIcon, 'home');
      break;

     case 1:
      setStyle(menu_personal, '#4caf50', 0, '3.5rem', param.personalIcon, 'personal');
      break;

     case 2:
      setStyle(menu_personal, '#fdd835', '3.5rem', '0', param.icon, 'top');
      break;

    }

    param.ele.appendChild(menu_personal);


   }
   return ele;
  })(param.ele));

  function setStyle(ele, ...args) {
   ele.style.background = args[0];
   ele.style.bottom = args[1];
   ele.style.right = args[2];
   ele.innerHTML = args[3];
   ele.id = args[4];
  }

 }
 {
  $(window).scroll(()=> {
   var scrollValue = $(window).scrollTop();
   if (scrollValue > param.distance) {
    if (param.tag) {
     $(param.ele).css('display', 'block').animateCss('fadeInRight');
     param.tag = !param.tag;
    }
   } else {
    if (!param.tag) {
     $(param.ele).css('display', 'none');
     $(param.ele).children().css('display', 'none');
     param.num++;
     param.tag = !param.tag;
    }
   }
  });

  $(param.ele).click((e)=> {
   window.e = e;
   switch (e.target.id) {

    case 'home':
     if (!getTypeNative()) {
      window.location.href = getAbsolutePath() + '/fenqihui/pages/recommended/recommended_index.html';
     } else if (getTypeNative() === 'ios') {
      backHome();
     } else if (getTypeNative() === 'android') {
      android.backHome();
     }

     break;

    case 'personal':

     if (!getTypeNative()) {
      window.location.href = getAbsolutePath() + '/fenqihui/pages/account/user_personal.html';
     } else if (getTypeNative() === 'ios') {
      //todo://前往个人中心
      backAccount();

     } else if (getTypeNative() === 'android') {
      android.backAccount();
     }
     break;

    case 'top':
     $(window).scrollTop(0);
     break;


   }
   param.num % 2 == 0 && $(param.ele).children().css('display', 'none') || $(param.ele).children().css('display', 'block').animateCss('swing');
   param.num++;
  })

 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 #Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 #Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 #Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 #Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 #Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 #Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
You might like
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
php函数式编程简单示例
2019/08/08 PHP
php集成开发环境详解
2019/09/24 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
js类中获取外部函数名的方法
2007/08/19 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python中max函数用于二维列表的实例
2018/04/03 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
六一节目主持词
2014/04/01 职场文书
网站客服岗位职责
2014/04/05 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
工作失误检讨书
2015/01/26 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server