纯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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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作的文本留言本的例子(一)
2006/10/09 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
javascript常用的方法分享
2015/07/01 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
pow在python中的含义及用法
2019/07/11 Python
python3 实现口罩抽签的功能
2020/03/11 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
行政管理专业求职信
2014/07/06 职场文书
慈善募捐倡议书
2015/04/27 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android