Greasy Fork is available in English.

MiniblogImgPop - 微博浮图

微博浮图控件,鼠标移过小图弹出浮动大图的脚本

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
// ==UserScript==
// @name            MiniblogImgPop - 微博浮图
// @namespace       http://userscripts.org/users/83994
// @icon            https://addons.cdn.mozilla.net/img/uploads/addon_icons/337/337281-64.png?modified=1361080128
// @description     微博浮图控件,鼠标移过小图弹出浮动大图的脚本
// @version         3.4.2
// @include         http://*qing.weibo.com/*
// @include         http://*weibo.com/*
// @include         https://*weibo.com/*
// @include         http://*t.163.com/*
// @include         http://*t.sohu.com/*
// @include         http://*t.qq.com/*
// @include         http://*t.ifeng.com/*
// @include         http://*t.titan24.com/*
// @include         http://*t.people.com.cn/*
// @include         http://*tianya.cn/*
// @include         http://*diandian.com/*
// @include         http://*.digu.com/*
// @include         http://i.taobao.com/*
// @include         http://*t.cntv.cn*
// @include         *://*tieba.baidu.com/f*
// @include         http://*tieba.baidu.com/i*
// @include         http://*xueqiu.com/*
// @include         https://*douban.com/*
// @include         https://*work.alibaba-inc.com/*
// @grant           none
// ==/UserScript==

// @author      afc163
// @weibo       http://weibo.com/afc163
// @code        https://github.com/afc163/MiniblogImgPop
// @blog        http://pianyou.me
// @date        2010.8.12

(function () {

  // 各微博站点的feed配置
  var MIPConfig = {
    'qing.weibo.com': {
      feedSelector: '.imgZoomIn',
      sFrag: '',
      bFrag: ''
    },
    's.weibo.com': {
      feedSelector: '[action-type="fl_pics"]',
      sFrag: 'thumb150',
      bFrag: 'large'
    },
    'q.weibo.com': {
      feedSelector: '.bigcursor',
      sFrag: 'thumbnail',
      bFrag: 'large'
    },
    'weibo.com': {
      feedSelector: '.bigcursor, .feed_img, .media_list img, .woo-picture-main img, .wbpro-feed-ogText a, .text a, .woo-avatar-main img',
      sFrag: ['thumb180', 'thumb150', 'orj480', 'orj360', 'thumbnail', 'square'],
      bFrag: ['mw690', 'mw690', 'mw690', 'mw690', 'bmiddle', 'bmiddle']
    },
    't.sohu.com': {
      feedSelector: '.pic',
      sFrag: ['/f_', '_1.jpg'],
      bFrag: ['/m_', '_0.jpg']
    },
    't.163.com': {
      feedSelector: '.tweet-preview-pic',
      sFrag: ['w=140&h=140', '&gif=1'],
      bFrag: ['w=440', '&gif=0']
    },
    't.qq.com': {
      feedSelector: '.pic img:not(.large)',
      sFrag: ['/160', '/120'],
      bFrag: ['/460', '/460']
    },
    't.titan24.com': {
      feedSelector: '.imgBig',
      sFrag: '_thumbnail',
      bFrag: '_middle'
    },
    't.people.com.cn': {
      feedSelector: '.list_s_pic img',
      sFrag: '/s_',
      bFrag: '/b_'
    },
    't.ifeng.com': {
      feedSelector: '.zoom_in_image img',
      sFrag: '/128x160_',
      bFrag: '/520x0_'
    },
    'www.tianya.cn': {
      feedSelector: '.pic-zoomin',
      bigSrc: '_middlepic',
      sFrag: 'small',
      bFrag: 'middle'
    },
    'diandian.com': {
      feedSelector: '.feed-img',
      bigSrc: 'imgsrc'
    },
    'digu.com': {
      feedSelector: '.picture',
      sFrag: '_100x75',
      bFrag: '_640x480'
    },
    't.cntv.cn': {
      feedSelector: '.zoom-move',
      sFrag: '/thumbnail',
      bFrag: '/bmiddle'
    },
    'i.taobao.com': {
      feedSelector: '.thumb-image',
      sFrag: '_160x160',
      bFrag: '_450x10000'
    },
    'tieba.baidu.com/f': {
      feedSelector: '.threadlist_media li',
      bigSrc: 'bpic'
    },
    'tieba.baidu.com/i': {
      feedSelector: '.feat_img',
      bigSrc: 'data-field'
    },
    'xueqiu.com': {
      feedSelector: '.expandable > img',
      sFrag: '!thumb',
      bFrag: '!custom'
    },
    'douban.com': {
      feedSelector: 'img',
      sFrag: 'median',
      bFrag: 'raw'
    },
    'work.alibaba-inc.com': {
      feedSelector: '.uxcore-nw-message-wall-item-album-thumb li',
      sFrag: ['240x240', '120x120'],
      bFrag: ['620x10000', '620x10000']
    }
  };

  // 居中显示的图片对象
  var PopImg = {

    show: function (e) {
      this.allowMove = false;
      // fix firefox 22 beta 1
      this._hideTimer && window.clearTimeout(this._hideTimer);

      var that = this;
      var smallImg = MiniblogImgPop.smallImg;
      var src = this.getBigImgsrc(smallImg);
      this.img.src = src;
      this.imgWidth = 500;

      imgReady(src, function () {
        that.imgWidth = this.width;
        that.layoutImg(e);

        that.img.style.opacity = 1;
        that.img.style.visibility = 'visible';
        that.img.style.marginTop = '-15px';
        Mask.show(e);

        // 换算图片显示高度
        //  1. 宽度超过 500 时,高度要等比例压缩
        //  2. 加上边框高度
        var imgDisplayHeight;
        if (this.width > 500) {
          imgDisplayHeight = (this.height) * 500 / this.width;
        } else {
          imgDisplayHeight = this.height;
        }

        if (window.innerHeight > imgDisplayHeight) {
          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          that.img.style.top = (scrollTop + (window.innerHeight - imgDisplayHeight) / 2 + 15) + 'px';
          that.allowMove = false;
        } else {
          that.allowMove = true;
          that.move(e);
        }
      });
    },

    // 设置大图的宽度与位置
    layoutImg: function (e) {
      var pos = offset(MiniblogImgPop.smallImg);
      var left = pos.x + pos.width + 30;
      var width = Math.min(this.imgWidth, 500);
      // 如果小图右边放不下
      if (left + width > window.innerWidth) {
        left = pos.x - width - 30;
        // 如果左边也放不下
        if (left < 0) {
          // 根据鼠标位置,选择空间大的一侧放置
          if (e.pageX > window.innerWidth / 2) {
            // 放置在左边
            width = Math.min(width, e.pageX - 30);
            left = 0;
          } else {
            // 放置在右边
            width = Math.min(width, window.innerWidth - e.pageX - 30);
            left = window.innerWidth - width;
          }
        }
      }
      this.img.style.width = width + 'px';
      this.img.style.left = left + 'px';
    },

    hide: function () {
      var that = this;
      this.img.style.opacity = 0;
      this.img.style.marginTop = '0px';

      Mask.hide();
      this.shown = false;

      this._hideTimer = window.setTimeout(function () {
        that.img.src = '';
        that.img.style.visibility = 'hidden';
      }, 200);
    },

    init: function () {
      var node = document.createElement('img');
      node.id = 'miniblogImgPop';
      document.body.appendChild(node);
      this.img = node;

      Mask.init();
    },

    move: function (e) {
      this.layoutImg(e); // 重新计算大图宽度与位置
      if (!this.allowMove) {
        return;
      }
      Mask.move(e);
      // 根据 Mask 的位置算出大图的位置
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      this.img.style.top = (scrollTop - Mask.top * Mask.scale) + 14 + 'px';
    },

    getBigImgsrc: function (obj) {
      var tempimgs, tempimg, imgsrc, i, l,
        sname = MiniblogImgPop.sitename,
        config = MiniblogImgPop.config;
      if (obj.tagName === 'IMG' || obj.tagName === 'img') {
        tempimg = obj;
      } else {
        tempimgs = obj.getElementsByTagName('IMG');
        if (!tempimgs || tempimgs.length === 0) {
          throw 'cant found the img node.';
        }
        else {
          tempimg = tempimgs[0];
        }
      }

      //针对使用额外属性保存大图地址的网站
      if (config.bigSrc) {
        return tempimg.getAttribute(config.bigSrc) || 'javascript:;';
      }

      //一般处理
      imgsrc = tempimg.getAttribute('src');
      //console.info(imgsrc);
      imgsrc = decodeURIComponent(imgsrc);
      if (typeof config.sFrag === 'object') {
        for (i = 0, l = config.sFrag.length; i < l; i++) {
          imgsrc = imgsrc.replace(config.sFrag[i], config.bFrag[i]);
        }
      }
      else {
        imgsrc = imgsrc.replace(config.sFrag, config.bFrag);
      }
      if (obj.tagName === 'a' || obj.tagName === 'A') {
        imgsrc = obj.href
      }
      return imgsrc;
    }

  };

  // 图片上遮罩的阴影
  var Mask = {
    show: function (e) {
      var smallImg = MiniblogImgPop.smallImg,
        bigImg = PopImg.img;

      this.sOffset = offset(smallImg);

      // 表示放大的倍数
      this.scale = (bigImg.height + 14) * 1.0 / this.sOffset.height;

      // 计算出bar的高度
      if (window.innerHeight < bigImg.height) {
        this.height = parseInt(window.innerHeight / this.scale, 10);
      } else {
        this.height = this.sOffset.height;
      }

      // 计算bar的Top值可以允许的范围
      this.range = this.sOffset.height - this.height;

      // 计算 mask 的位置
      this.nodes[0].style.left = this.sOffset.x + 'px';
      this.nodes[0].style.width = this.sOffset.width + 'px';
      this.nodes[0].style.top = this.sOffset.y + 'px';
      this.nodes[1].style.left = this.sOffset.x + 'px';
      this.nodes[1].style.width = this.sOffset.width + 'px';
      this.nodes[1].style.bottom = (window.innerHeight - this.sOffset.y - this.sOffset.height) + 'px';
      this.move(e);

      this.nodes[0].style.opacity = 0.7;
      this.nodes[1].style.opacity = 0.7;
    },
    hide: function () {
      this.nodes[0].style.opacity = 0;
      this.nodes[1].style.opacity = 0;
      this.nodes[0].style.height = 0;
      this.nodes[1].style.height = 0;
    },
    move: function (e) {
      // 计算鼠标相对于元素的位置
      var x = e.pageX - this.sOffset.x,
        y = e.pageY - this.sOffset.y;

      // 计算bar的top值
      var top = y - this.height / 2;
      top = top < 0 ? 0 : top;
      top = top > this.range ? this.range : top;
      this.top = top;

      this.nodes[0].style.height = top + 'px';
      this.nodes[1].style.height = (this.sOffset.height - top - this.height) + 'px';
    },
    init: function () {
      var node1 = document.createElement('div');
      node1.className = 'miniblogImgPop-mask';
      document.body.appendChild(node1);
      var node2 = document.createElement('div');
      node2.className = 'miniblogImgPop-mask';
      document.body.appendChild(node2);
      this.nodes = [node1, node2];
    }
  };

  var MiniblogImgPop = {

    preloadImg: function () {
      var that = this;
      window.setTimeout(function () {
        var nodes = $(that.config.feedSelector);
        for (var i = 0; i < nodes.length; i++) {
          var preloadImg = new Image();
          preloadImg.src = PopImg.getBigImgsrc(nodes[i]);
        }
      }, 1500);
    },

    prepare: function () {
      this.sitename = this._getSiteName();
      this.config = MIPConfig[this.sitename];
    },

    addImgsEventListener: function () {
      var that = this;
      delegate(document.body, 'mouseover', function (e, node) {
        that.smallImg = node;
        node.style.opacity = 0.84;
        PopImg.show(e);
      }, this.config.feedSelector);
      delegate(document.body, 'mouseout', function (e, node) {
        node.style.opacity = '';
        PopImg.hide();
      }, this.config.feedSelector);
      delegate(document.body, 'mousemove', function (e) {
        PopImg.move(e);
      }, this.config.feedSelector);
    },

    // 获得当前站点名
    _getSiteName: function () {
      var i, each;
      for (each in MIPConfig) {
        if (location.href.indexOf(each) != -1) {
          return each;
        }
      }
      return '';
    },

    init: function () {
      // 初始化两个节点
      PopImg.init();
      // 准备必要的数据
      this.prepare();
      // 绑定imgs hover事件
      this.addImgsEventListener();
      // 预加载大图
      this.preloadImg();
    }

  };

  // 启动
  MiniblogImgPop.init();


  // Helpers
  // ---

  function $(selector) {
    return document.querySelectorAll(selector);
  }

  function offset(source) {
    var pt = {
      x: 0,
      y: 0,
      width: source.offsetWidth,
      height: source.offsetHeight
    };
    do {
      pt.x += source.offsetLeft;
      pt.y += source.offsetTop;
      source = source.offsetParent;
    } while (source);
    return pt;
  }

  function delegate(el, eventType, handler, selector) {
    el = el || document;
    el.addEventListener(eventType, function (e) {
      var node = getHandlerNode(e, selector, el);
      node && handler.call(el, e, node);
    }, false);

    function getHandlerNode(e, selector, el) {
      //返回我们handler需要的参数
      var nodes;
      el = el || document;
      if (e && e.target && selector) {
        nodes = el.querySelectorAll(selector);
        for (i = 0; i < nodes.length; i++) {
          if (e.target == nodes[i] || isInDomChain(e.target, nodes[i], el)) {
            return nodes[i];
          }
        }
        return false;
      }
    }

    function isInDomChain(target, parent, ancestor, maxDepth) {
      ancestor = ancestor || null;
      maxDepth = maxDepth || 100;

      if (target == ancestor) {
        return false;
      }
      if (target == parent) {
        return true;
      }
      var i = 0;//防止过多嵌套
      while (target != ancestor && target !== null && (i++ < maxDepth)) {
        target = target.parentNode;
        if (target == parent) {
          return true;
        }
      }
      return false;
    }
  }

  /**
  * 图片头数据加载就绪事件 - 更快获取图片尺寸
  * @version 2011.05.27
  * @author  TangBin
  * @see     http://www.planeart.cn/?p=1121
  * @param   {String}    图片路径
  * @param   {Function}  尺寸就绪
  * @param   {Function}  加载完毕 (可选)
  * @param   {Function}  加载错误 (可选)
  * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  alert('size ready: width=' + this.width + '; height=' + this.height);
  });
  */
  var imgReady = (function () {
    var list = [], intervalId = null,

      // 用来执行队列
      tick = function () {
        var i = 0;
        for (; i < list.length; i++) {
          list[i].end ? list.splice(i--, 1) : list[i]();
        }
        !list.length && stop();
      },

      // 停止所有定时器队列
      stop = function () {
        window.clearInterval(intervalId);
        intervalId = null;
      };

    return function (url, ready, load, error) {
      var onready, width, height, newWidth, newHeight,
        img = new Image();

      img.src = url;

      // 如果图片被缓存,则直接返回缓存数据
      if (img.complete) {
        ready.call(img);
        load && load.call(img);
        return;
      }

      width = img.width;
      height = img.height;

      // 加载错误后的事件
      img.onerror = function () {
        error && error.call(img);
        onready.end = true;
        img = img.onload = img.onerror = null;
      };

      // 图片尺寸就绪
      onready = function () {
        newWidth = img.width;
        newHeight = img.height;
        if (newWidth !== width || newHeight !== height ||
          // 如果图片已经在其他地方加载可使用面积检测
          newWidth * newHeight > 1024
        ) {
          ready.call(img);
          onready.end = true;
        }
      };
      onready();

      // 完全加载完毕的事件
      img.onload = function () {
        // onload在定时器时间差范围内可能比onready快
        // 这里进行检查并保证onready优先执行
        !onready.end && onready();

        load && load.call(img);

        // IE gif动画会循环执行onload,置空onload即可
        img = img.onload = img.onerror = null;
      };

      // 加入队列中定期执行
      if (!onready.end) {
        list.push(onready);
        // 无论何时只允许出现一个定时器,减少浏览器性能损耗
        if (intervalId === null) intervalId = setInterval(tick, 40);
      }
    };
  })();

  // GM_addStyle function is not existed in chrome 27
  var GM_addStyle = GM_addStyle || function (css) {
    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName("head")[0].appendChild(style);
  };

  // 增加自定义样式
  GM_addStyle("\
  #miniblogImgPop {\
    border: 0px solid rgba(255,255,255,1);\
    border-radius: 8px;\
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 0, 0, 0.25) inset;\
    z-index: 12345;\
    opacity: 0;\
    margin-top: 0;\
    position: absolute;\
    visibility: hidden;\
    max-width: 500px;\
    transition: opacity 0.2s ease-out 0s, margin-top 0.2s ease-out 0s;\
  }\
  ");

  // 增加自定义样式
  GM_addStyle("\
  .miniblogImgPop-mask {\
    background: rgb(0, 0, 0);\
    z-index: 999;\
    position: absolute;\
    transition: opacity 0.4s ease-out 0;\
  }\
  ");

})();