button.js

(function(d){

  var htmlNode = d.getElementsByTagName('html')[0];

  /* Load icon font アイコンフォントをロード */
  var fontLink = d.createElement('link');
  fontLink.rel = 'stylesheet';
  fontLink.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
  htmlNode.appendChild(fontLink);
  /*
   * Select your favorite icon's unicode here
   * アイコンフォントのUnicodeはここで選ぶ
   * http://fortawesome.github.io/Font-Awesome/icons/
   */


  function setActionButton(iconUnicode, diameter, fromTop, fromLeft, iconColor, bgColor, actionFunc) {
    var btn = d.createElement('div');
    var s = btn.style;
    var nDiameter = parseInt(diameter);
    s.fontFamily = 'FontAwesome';
    s.textAlign = 'center';
    s.width = diameter;
    s.height = diameter;
    s.lineHeight = diameter;
    s.fontSize = (nDiameter * 0.5) + 'px';
    s.borderRadius = (nDiameter * 0.5) + 'px';
    s.backgroundColor = bgColor;
    s.color = iconColor;
    s.position = 'fixed';
    s.zIndex = '99999';
    s.top = fromTop;
    s.left = fromLeft;
    s.userSelect = 'none';
    s.webkitUserSelect = 'none';
    s.MozUserSelect = 'none';
    btn.textContent = String.fromCharCode(parseInt(iconUnicode, 16));
    var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
    var eventName1 = isTouchDevice ? 'touchstart' : 'mousedown';
    var eventName2 = isTouchDevice ? 'touchend'   : 'mouseup';
    var eventName3 = isTouchDevice ? 'touchmove'  : 'mousemove';
    var holdingTimer;
    var offset = {x: 0, y: 0};
    btn.isHolded = false;
    btn.addEventListener(eventName1, function(e){
      clearTimeout(holdingTimer);
      holdingTimer = setTimeout(function(){
        offset.x = window.pageXOffset;
        offset.y = window.pageYOffset;
        btn.style.transition = '0.3s';
        btn.style.boxShadow = '0 0 6px #999';
        setTimeout(function(){ btn.style.transition = ''; }, 350);
        btn.isHolded = true;
      }, 400);
      e.preventDefault();
      e.stopPropagation();
    });
    btn.addEventListener(eventName2, function(e){
      if (!btn.isHolded) {
        actionFunc();
      }
    });
    d.addEventListener(eventName2, function(){
      if (!btn.isHolded) return;
      clearTimeout(holdingTimer);
      btn.style.transition = '0.3s';
      btn.style.boxShadow = 'none';
      setTimeout(function(){ btn.style.transition = ''; }, 350);
      btn.isHolded = false;
    });
    d.addEventListener(eventName3, function(e){
      if (!btn.isHolded) return;
      var pX, pY;
        pX = e.pageX;
        pY = e.pageY;
      pX -= offset.x;
      pY -= offset.y;
      btn.style.left = (pX - nDiameter * 0.5) + 'px';
      btn.style.top = (pY - nDiameter * 0.5) + 'px';
    });
    htmlNode.appendChild(btn);
  }


  /* setActionButton(iconUnicode,       Unicode
   *                 diameter,          ボタン直径
   *                 fromTop,           上からの距離
   *                 fromLeft,          左からの距離
   *                 iconColor,         アイコンの色
   *                 bgColor,           背景色
   *                 actionFunc,        押された時に実行したい機能
   *                 );
   */
  setActionButton('f20e', '50px', '30px', '20px', '#ffffff', '#99aaff', function(){
    alert('button1');
  });

  setActionButton('f232', '50px', '90px', '20px', '#ffffff', '#99ee33', function(){
    alert('button2');
  });

  setActionButton('f231', '50px', '150px', '20px', '#ffffff', '#ff9933', function(){
    alert('button3');
  });


})(document);

demo_bookmarklet.js

javascript:(function(d){var htmlNode = d.getElementsByTagName('html')[0];var fontLink = d.createElement('link');fontLink.rel = 'stylesheet';fontLink.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';htmlNode.appendChild(fontLink);function setActionButton(iconUnicode, diameter, fromTop, fromLeft, iconColor, bgColor, actionFunc) {var btn = d.createElement('div');var s = btn.style;var nDiameter = parseInt(diameter);s.fontFamily = 'FontAwesome';s.textAlign = 'center';s.width = diameter;s.height = diameter;s.lineHeight = diameter;s.fontSize = (nDiameter * 0.5) + 'px';s.borderRadius = (nDiameter * 0.5) + 'px';s.backgroundColor = bgColor;s.color = iconColor;s.position = 'fixed';s.zIndex = '99999';s.top = fromTop;s.left = fromLeft;s.userSelect = 'none';s.webkitUserSelect = 'none';s.MozUserSelect = 'none';btn.textContent = String.fromCharCode(parseInt(iconUnicode, 16));var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);var eventName1 = isTouchDevice ? 'touchstart' : 'mousedown';var eventName2 = isTouchDevice ? 'touchend'   : 'mouseup';var eventName3 = isTouchDevice ? 'touchmove'  : 'mousemove';var holdingTimer;var offset = {x: 0, y: 0};btn.isHolded = false;btn.addEventListener(eventName1, function(e){clearTimeout(holdingTimer);holdingTimer = setTimeout(function(){offset.x = window.pageXOffset;offset.y = window.pageYOffset;btn.style.transition = '0.3s';btn.style.boxShadow = '0 0 6px #999';setTimeout(function(){ btn.style.transition = ''; }, 350);btn.isHolded = true;}, 400);e.preventDefault();e.stopPropagation();});btn.addEventListener(eventName2, function(e){if (!btn.isHolded) {actionFunc();}});d.addEventListener(eventName2, function(){if (!btn.isHolded) return;clearTimeout(holdingTimer);btn.style.transition = '0.3s';btn.style.boxShadow = 'none';setTimeout(function(){ btn.style.transition = ''; }, 350);btn.isHolded = false;});d.addEventListener(eventName3, function(e){if (!btn.isHolded) return;var pX, pY;pX = e.pageX;pY = e.pageY;pX -= offset.x;pY -= offset.y;btn.style.left = (pX - nDiameter * 0.5) + 'px';btn.style.top = (pY - nDiameter * 0.5) + 'px';});htmlNode.appendChild(btn);}setActionButton('f20e', '50px', '30px', '20px', '#ffffff', '#99aaff', function(){alert('button1');});setActionButton('f232', '50px', '90px', '20px', '#ffffff', '#99ee33', function(){alert('button2');});setActionButton('f231', '50px', '150px', '20px', '#ffffff', '#ff9933', function(){alert('button3');});})(document);

ss.png