这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了纯 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++;
- })
- }
- });
来源: http://www.phperz.com/article/17/0705/329440.html