纯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 相关文章推荐
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
js Array.slice的8种不同用法示例
Jul 10 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获取当前时间的毫秒数的方法
2014/01/26 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
理解JavaScript原型链
2016/10/25 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
c++工程师面试问题
2013/08/04 面试题
科室工作的个人自我评价
2013/10/30 职场文书
高三英语教学反思
2014/01/13 职场文书
党员公开承诺书
2014/03/25 职场文书
初三学生个人自我评定
2014/04/06 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python