纯js实现悬浮按钮组件

前端之家收集整理的这篇文章主要介绍了纯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',param.homeIcon,'home');
  break;

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

 case 2:
  setStyle(menu_personal,'#fdd835','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++;
})

}
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/43429.html

猜你在找的JavaScript相关文章