一个基于css的简单悬浮按钮

简介

在网页上运行js（借助油猴插件），很多时候希望能够添加几个按钮来手动控制脚本的开启与关闭，或者是控制具体要执行哪些函数。以前我是直接从网页上用选择器挑选几个特别的元素，然后绑定点击事件，来达到目的的。但这种方法有很多弊端，比如：父网页有的元素在子网页中没有，或者是子网页有的元素在其他子网页中没有，造成通用性差；当前网页位于相邻位置的不是同一类元素，这样就需要分别用选择器，增加了工作量；多数情况下是不建议修改所选择元素的文本的，这样就会缺少提示信息，不知道要点哪个、会执行什么；可移植性差。

一种解决方案是往网页中插入新元素，然后绑定点击事件。这种方案也有弊端，比如：在插入元素前仍需要先选择一个网页中的元素，如果父网页有的元素在子网页中没有，或者是子网页有的元素在其他子网页中没有，会造成通用性差；随意插入元素可能会破坏原有网页的结构，造成显示异常；未插入到网页首或尾的新元素不建议设置position:fixed这样的样式，否则会造成显示异常，这样就不能生成可以跟随滚动的按钮。

针对上述方案进行改进：

1. 可以选择网页中如body等必有元素然后插入
2. 插入的元素要位于body最后一个子节点或第一个子节点
3. 设置插入的元素的css样式为position:fixed，这样按钮就可以如何滚动都位于同一位置
4. 元素可以设置为div，就可以包含更多的按钮，形成一个小菜单

代码部分

通过上面的分析，可以写出以下代码（在油猴插件中运行，或者可以截取js部分附加到一个网页中运行）：

// ==UserScript==
// @name         通用悬浮按钮
// @namespace    http://tampermonkey.net/
// @version      0.1.0
// @description  可以在页面上生成一个通用的悬浮跟随按钮
// @author       wsws男
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    //一个是新元素，一个是body元素
    var mybutton,beasetag;
    //创建新元素
    mybutton = document.createElement("div");
    //搜寻body元素
    beasetag = document.querySelector("body");
    //将新元素作为子节点插入到body元素的最后一个子节点之后
    beasetag.appendChild(mybutton);
    //可以通过mybutton.innerHTML = "<button type='button'>启动</button><br><button type='button'>关闭</button>"来写入其他元素，如多个按钮
    mybutton.innerHTML = "按钮";
    //css样式为
    //position:fixed;生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    //bottom:15px;距窗口底部15px
    //right:15px;距窗口右边15px
    //width:60px;内容的宽度60px
    //height:60px;内容的高度60px
    //background:black;内边距的颜色和内容的颜色设置为黑色，不包括外边距和边框
    //opacity:0.75;不透明度设置为0.75，1为完全不透明
    //color:white;指定文本的颜色为白色
    //text-align:center;指定元素文本的水平对齐方式为居中对齐
    //line-height:60px;设置行高，通过设置为等于该元素的内容高度的值，配合text-align:center;可以使div的文字居中
    //cursor:pointer;定义了鼠标指针放在一个元素边界范围内时所用的光标形状为一只手
    mybutton.style = "position:fixed;bottom:15px;right:15px;width:60px;height:60px;background:black;opacity:0.75;color:white;text-align:center;line-height:60px;cursor:pointer;";
    //通过匿名函数，设置点击该悬浮按钮后执行的函数
    mybutton.onclick = function(){alert("这里可以改为调用其他函数");};
})();

运行效果