纯射流研究…实现悬浮按钮组件

先上效果

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

$(()={ let param={ tag: true，num: 1，ele : document。创建元素(' div ')，icon : '',homeicon: '',moreicon: '',personal con : '',closeicon: '',distance: ' 500 '，CSS : ' position : fixed ' bottom :4 rem ' ' box-shadow :10 px 10px灰色；'right :10 px ' display : none ' font-size :1.5 rem；'color : # fff ' ' z-index :1000；'高度：2.5雷姆宽度：2.5雷姆背景# f44336 ' '边框-半径：50%;'线高：2.5雷姆' text-align:center '，menuc ss : ' position : absolute；'//“底部：3 rem”display : none ' ' box-shadow :10 px 10px 10px灰色；' font-size :1.2 rem；'color : # fff ' background : orange ' ' height :2 rem '宽度：2毫米'边框-半径：50%;'文本对齐：中心；'线高：2雷姆；//键入： ' # top ' }；{ document.querySelector('body ').appendChild(((ele)={ ele。类名='滚动图标字体'；埃勒。innerhtml=param。更多图标；//ele。href=param。类型；埃勒。风格。CSS文本=参数。CSS用于(设I=0；I 3；I){让菜单_个人=文档。创建元素(' a ')；菜单_个人。类名='图标字体'；菜单_个人。风格。CSS文本=参数。menucssswitch(I){ case 0: setStyle(menu _ personal，' #2196f3 '，' 2.4rem '，' 2.4rem '，param.homeIcon，' home ')；打破；case 1: setStyle(menu _ personal，' #4caf50 '，0，' 3.5rem '，param.personalIcon，' personal ')；打破；case 2: SetStyle(menu _ personal，' #fdd835 '，' 3.5rem '，' 0 '，param.icon，' top ')；打破；} param。埃勒。appendchild(menu _ personal)；}返回)(参数。ele))；函数setStyle(ele，args){ ele。风格。背景=args[0]；埃勒。风格。bottom=args[1]；埃勒。风格。right=args[2]；埃勒。innerHTMl=args[3]；埃勒。id=args[4]；} } { $(窗口)。滚动(()={ var scrollValue=$(window).滚动顶部()；if(scrollVaLue参数。距离){ if(参数。标记){ $(param。ele ).css('显示'，'块').animate cs(' FADEINRIght ')；param.tag=！param.tag} } else { if(！param.tag) { $(param.ele).css('display '，' none ')；$(参数元素).儿童()。css('display '，' none ')；param.numparam.tag=！param . tag } } })；$(参数元素).点击((e)={ window。e=e开关(即目标。id){ case ' home ' : if(！getTypeNative()){ window。位置。href=GetAbsolutePath()'/fenqihui/pages/recommended/recommended _ index。html '；} else if(getTypeNative()==' IOs '){ back home()；} else if(getTypeNative()==' Android '){ Android。回到家()；} breakcase 'personal': if(！getTypeNative()){ window。位置。href=getAbsolutePath()'/fenqihui/pages/account/user _ personal。html '；} else if(getTypeNative()===' IOs '){//todo ://前往个人中心back ACcount()；} else if(getTypeNative()==' Android '){ Android。后台账户()；}休息案例top': $(窗口)。滚动顶部(0)；打破；} param.num % 2==0 $(param.ele).儿童()。css('display '，' none') || $(param.ele).儿童()。css('显示'，'块').animecs(' swing ')；param . num })} })；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。