家政微信小程序_纯js完成悬浮按钮组件

2021-01-12 16:14 jianzhan
纯js实现悬浮按钮组件       这篇文章主要为大家详细介绍了纯js实现悬浮按钮组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

$(()= {
 let param = {
 tag: true,
 num: 1,
 ele: document.createElement('div'),
 icon: ' #xe6a2;',
 homeIcon: ' #xe643;',
 moreIcon: ' #xe627;',
 personalIcon: ' #xe644;',
 closeIcon: ' #xe628;',
 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 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);

$(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/'; } else if (getTypeNative() === 'ios') { backHome(); } else if (getTypeNative() === 'android') { android.backHome(); break; case 'personal': if (!getTypeNative()) { window.location.href = getAbsolutePath() + '/fenqihui/pages/'; } else if (getTypeNative() === 'ios') { //todo://前往个人中心 ount(); } else if (getTypeNative() === 'android') { ount(); 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++;

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