☰

百度贴吧图片点击放大

直接在当前页面查看原图，可缩放，可多开，可拖拽

目前为 2017-03-01 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         百度贴吧图片点击放大
  3. // @version      1.5.5.20170301
  4. // @description  直接在当前页面查看原图，可缩放，可多开，可拖拽
  5. // @include      http://tieba.baidu.com/p/*
  6. // @include      http://tieba.baidu.com/f?*
  7. // @grant        GM_setValue
  8. // @grant        GM_getValue
  9. // @grant        GM_addStyle
  10. // @grant        GM_registerMenuCommand
  11. // @author       lliwhx
  12. // @copyright    Copyright 2016-2017 lliwhx
  13. // @license      MIT License
  14. // @namespace https://github.com/lliwhx/Userscripts
  15. // ==/UserScript==
  16.  
  17. //CSS
  18. GM_addStyle("#Tie_enlargeImage_parentDIV{position:fixed;z-index:1005;top:0;left:0;}.Tie_enlargeImage{position:absolute;box-shadow:1px 1px 10px #000;cursor:url(http://cur.cursors-4u.net/others/oth-8/oth755.cur),progress;}.Tie_enlargeImage:hover{z-index:1006;}#Tie_setValue_DIV{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,0.5);}.Tie_definedDIV{position:absolute;z-index:10000;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);}.Tie_definedDIV_title{border-bottom:1px solid #f2f2f5;line-height:40px;font-size:15px;font-weight:700;padding:0 0 0 15px;}.Tie_definedDIV_point{padding:20px 40px;}.Tie_groupSubtitle{font-weight:bold;}.Tie_configItem{line-height:30px;margin:0 20px}.Tie_configItem select{margin:0.5em}.Tie_configItem br+label{margin-left:3em}.Tie_configItem input{vertical-align:middle;margin-right:0.5em}.Tie_definedDIV_SaveBtn{background-color:#f2f2f5;text-align:center;padding:10px 0;}.Tie_SaveBtn_a{background:#ff8140;color:#fff;font-size:15px;display:inline-block;padding:0 15px;line-height:35px;border-radius:3px;}.Tie_SaveBtn_a:hover{background:#f7671d}");
  19. //数据缓存
  20. var target,imageTarget,imageMouse,imageCount,imageButton,leftX,rightY,docResize,
  21.     doc = document,
  22.     docHeight = doc.documentElement.clientHeight-6,
  23.     docWidth = doc.documentElement.clientWidth-6,
  24.     parentElement = doc.getElementById("j_p_postlist"),
  25.     mouseWheel = /Firefox/.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel",
  26.     definedEvent = GM_getValue("definedEvent","click,click,1,0,1").split(","),
  27.     repairDefinedEvent = GM_getValue("repairDefinedEvent",false);
  28. var imageEvent = {
  29.     init:function(event){ //主事件
  30.         var e=event,eTarget=e.target;
  31.         if(e.button===0&&eTarget.className==="BDE_Image"){
  32.             var imageSrc = eTarget.src.match(/[a-z0-9]+\.[a-zA-Z]{3,4}$/);
  33.             if(!imageSrc) return false;
  34.             var image = doc.createElement("img");
  35.             image.classList.add("Tie_enlargeImage");
  36.             image.src = "http://imgsrc.baidu.com/forum/pic/item/" + imageSrc[0];
  37.             image.onload = function(){
  38.                 target = this;
  39.                 this.onload = null;
  40.                 imageTarget = [this.width,this.height];
  41.                 var ifHeight = imageTarget[1]>docHeight,ifX = 6,ifY = 6;
  42.                 if(ifHeight&&imageTarget[0]<docWidth){
  43.                     ifX = (docWidth-imageTarget[0])/2;
  44.                 }
  45.                 if(!ifHeight){
  46.                     ifX = (docWidth-imageTarget[0])/2;ifY = (docHeight-imageTarget[1])/2;
  47.                 }
  48.                 imageTarget.push(ifX,ifY);
  49.                 this.style.transform = "translate("+ifX+"px,"+ifY+"px)";
  50.                 parentDIV.appendChild(this);
  51.             };
  52.             image = null;
  53.         }
  54.     },
  55.     StopPropagation:function(event){
  56.         if(event.button===0&&event.target.className==="BDE_Image")event.stopPropagation();
  57.     },
  58.     Down:function(event){ //image鼠标down事件
  59.         var e=event,eTarget=e.target;
  60.         if (e.button!==0)return false;
  61.         e.preventDefault();
  62.         e.stopPropagation();
  63.         if(target!==eTarget){
  64.             target = eTarget;
  65.             var reg = eTarget.style.transform.match(/[-0-9.]+/g);
  66.             imageTarget = [eTarget.width,eTarget.height,parseFloat(reg[0]),parseFloat(reg[1])]; //图片的宽高，当前位置的XY
  67.         }
  68.         imageMouse = [e.clientX,e.clientY]; //鼠标按下时的XY
  69.         imageCount = [imageTarget[2]-imageMouse[0],imageTarget[3]-imageMouse[1],6-imageTarget[0],6-imageTarget[1]];
  70.         imageButton = true;
  71.         doc.addEventListener("mousemove",imageEvent.Move);
  72.         doc.addEventListener("mouseup",imageEvent.Up);
  73.     },
  74.     Move:function(event){
  75.         var e=event;
  76.         imageButton = false;
  77.         leftX = e.clientX+imageCount[0];
  78.         rightY = e.clientY+imageCount[1];
  79.         if(leftX<imageCount[2]){ //左边界
  80.             target.style.transform = "translate("+imageCount[2]+"px,"+rightY+"px)";
  81.             return false;
  82.         }
  83.         if(leftX>docWidth){ //右边界
  84.             target.style.transform = "translate("+docWidth+"px,"+rightY+"px)";
  85.             return false;
  86.         }
  87.         if(rightY<imageCount[3]){ //上边界
  88.             target.style.transform = "translate("+leftX+"px,"+imageCount[3]+"px)";
  89.             return false;
  90.         }
  91.         if(rightY>docHeight){ //下边界
  92.             target.style.transform = "translate("+leftX+"px,"+docHeight+"px)";
  93.             return false;
  94.         }
  95.         target.style.transform = "translate("+leftX+"px,"+rightY+"px)";
  96.     },
  97.     Up:function(){
  98.         if(repairDefinedEvent&&Math.abs(leftX-imageTarget[2])<1&&Math.abs(rightY-imageTarget[3])<1){
  99.             imageButton = true;
  100.         }
  101.         if(!imageButton){
  102.             imageTarget[2] = leftX;
  103.             imageTarget[3] = rightY;
  104.             leftX = null;
  105.             rightY = null;
  106.         }
  107.         imageMouse = null;
  108.         imageCount = null;
  109.         doc.removeEventListener("mousemove",imageEvent.Move);
  110.         doc.removeEventListener("mouseup",imageEvent.Up);
  111.     },
  112.     Close:function(event){
  113.         event.stopPropagation();
  114.         if(imageButton){
  115.             parentDIV.removeChild(target);
  116.             target = null;
  117.             imageTarget = null;
  118.             imageButton = null;
  119.         }
  120.     },
  121.     Wheel:function(event){
  122.         var e=event,eTarget=e.target;
  123.         e.preventDefault();
  124.         e.stopPropagation();
  125.         if(target!==eTarget){
  126.             target = eTarget;
  127.             var reg = eTarget.style.transform.match(/[-0-9.]+/g);
  128.             imageTarget = [eTarget.width,eTarget.height,parseFloat(reg[0]),parseFloat(reg[1])];
  129.         }
  130.         var wheelKey = definedEvent[3];
  131.         if(wheelKey!=="0"){
  132.             if((e.ctrlKey&&wheelKey==="1")||(e.altKey&&wheelKey==="2")||(e.shiftKey&&wheelKey==="3")){
  133.                 var eX = e.clientX,eY = e.clientY,
  134.                     eTargetWidth = imageTarget[0],eTargetHeight = imageTarget[1],
  135.                     ratioX = (eX-imageTarget[2])/eTargetWidth,ratioY = (eY-imageTarget[3])/eTargetHeight,
  136.                     wheelRatio = eTargetWidth+(e.wheelDelta||-e.detail*40)*definedEvent[4];
  137.                 imageTarget[0] = wheelRatio<150?150:wheelRatio;
  138.                 imageTarget[1] = imageTarget[0]*eTargetHeight/eTargetWidth;
  139.                 imageTarget[2] = eX-(imageTarget[0]*ratioX);
  140.                 imageTarget[3] = eY-(imageTarget[1]*ratioY);
  141.                 eTarget.width = imageTarget[0];
  142.                 eTarget.style.transform = "translate("+imageTarget[2]+"px,"+imageTarget[3]+"px)";
  143.                 return false;
  144.             }
  145.         }
  146.         if(imageTarget[1]<docHeight)
  147.             return false;
  148.         var wheelY = imageTarget[3]+(-e.wheelDelta||e.detail*40)*definedEvent[2];
  149.         if(wheelY>0||wheelY<docHeight-imageTarget[1]){
  150.             wheelY = wheelY>0?6:docHeight-imageTarget[1];
  151.         }
  152.         imageTarget[3] = wheelY;
  153.         eTarget.style.transform = "translate("+imageTarget[2]+"px,"+wheelY+"px)";
  154.     }
  155. };
  156. //创建DIV父框架
  157. var parentDIV = doc.createElement("div");
  158. parentDIV.id = "Tie_enlargeImage_parentDIV";
  159. doc.body.appendChild(parentDIV);
  160. parentDIV = doc.getElementById("Tie_enlargeImage_parentDIV");
  161. //事件委托
  162. parentElement.addEventListener("click",imageEvent.StopPropagation,true);
  163. parentElement.addEventListener(definedEvent[0],imageEvent.init,true);
  164. parentDIV.addEventListener("mousedown",imageEvent.Down);
  165. parentDIV.addEventListener(definedEvent[1],imageEvent.Close);
  166. parentDIV.addEventListener(mouseWheel,imageEvent.Wheel);
  167. //清空缓存
  168. parentElement=null;
  169.  
  170. //自定义设置
  171. var userEvent = {
  172.     init:function(){
  173.         this.create();
  174.         this.Event();
  175.     },
  176.     create:function(){
  177.         var definedDIV = doc.createElement("div"); //创建自定义DIV框架
  178.         definedDIV.id = "Tie_setValue_DIV";
  179.         definedDIV.innerHTML = "<div class='Tie_definedDIV'><div class='Tie_definedDIV_title'>自定义设置</div><div><div class='Tie_definedDIV_point'><div class='Tie_groupSubtitle'>请保证鼠标在图片上进行操作</div><div class='Tie_configItem'>默认支持鼠标左键拖拽图片</div><div class='Tie_configItem'>查看图片<select name='Tie_setValue'><option value='click'>单击</option><option value='dblclick'>双击</option></select></div><div class='Tie_configItem'>关闭图片<select name='Tie_setValue'><option value='click'>单击</option><option value='dblclick'>双击</option></select><br><label><input id='Tie_repairValue' type='checkbox'>尝试修复关闭图片功能<label></div><div class='Tie_configItem'>上移图片<select name='Tie_setValue'><option value='1'>滚轮向上</option><option value='-1'>滚轮向下</option></select></div><div class='Tie_configItem'>缩放图片<select name='Tie_setValue'><option value='0'>关闭</option><option value='1'>Ctrl</option><option value='2'>Alt</option><option value='3'>Shift</option></select>+<select name='Tie_setValue'><option value='1'>滚轮向上放大</option><option value='-1'>滚轮向下放大</option></select></div></div></div><div class='Tie_definedDIV_SaveBtn'><a id='Tie_setValue_a' class='Tie_SaveBtn_a' href='javascript:void(0);'><span>确定</span></a></div></div>";
  180.         doc.body.appendChild(definedDIV);
  181.         definedDIV = null;
  182.     },
  183.     Event:function(){
  184.         var definedDIV = doc.getElementById("Tie_setValue_DIV"),
  185.             repairValue = doc.getElementById("Tie_repairValue"),
  186.             parentElement = doc.getElementById("j_p_postlist"),
  187.             setValue = doc.getElementsByName("Tie_setValue"),
  188.             oldDefinedEvent = definedEvent.concat(); //备份旧设置
  189.         for(var i=0;i<5;i++){
  190.             setValue[i].value = oldDefinedEvent[i];
  191.         }
  192.         repairValue.checked = repairDefinedEvent;
  193.         if(setValue[3].value==="0")setValue[4].style.visibility = "hidden";
  194.         setValue[3].onchange = function(){
  195.             setValue[4].style.visibility = this.value==="0"?"hidden":"visible";
  196.         };
  197.         doc.getElementById("Tie_setValue_a").onclick = function(){
  198.             for(var i=0;i<5;i++){
  199.                 definedEvent[i] = setValue[i].value;
  200.             }
  201.             repairDefinedEvent = repairValue.checked;
  202.             if(oldDefinedEvent[0]!==definedEvent[0]){
  203.                 parentElement.removeEventListener(oldDefinedEvent[0],imageEvent.init,true);
  204.                 parentElement.addEventListener(definedEvent[0],imageEvent.init,true);
  205.             }
  206.             if(oldDefinedEvent[1]!==definedEvent[1]){
  207.                 parentDIV.removeEventListener(oldDefinedEvent[1],imageEvent.Close);
  208.                 parentDIV.addEventListener(definedEvent[1],imageEvent.Close);
  209.             }
  210.             this.onclick = null;
  211.             setValue[3].onchange = null;
  212.             doc.body.removeChild(definedDIV);
  213.             GM_setValue("definedEvent",definedEvent.toString());
  214.             GM_setValue("repairDefinedEvent",repairDefinedEvent);
  215.             definedDIV = null;repairValue = null;parentElement = null;setValue = null;oldDefinedEvent = null;
  216.         };
  217.     }
  218. };
  219. if(!GM_getValue("definedEvent")){
  220.     userEvent.init();
  221. }
  222. GM_registerMenuCommand("自定义设置", function(){
  223.     if(!doc.getElementById("Tie_setValue_DIV"))
  224.         userEvent.init();
  225. });
  226.  
  227. window.addEventListener("resize", function(){
  228.     if(typeof docResize!==undefined){
  229.         clearTimeout(docResize);
  230.     }
  231.     docResize = setTimeout(function(){
  232.         docHeight = doc.documentElement.clientHeight-6;
  233.         docWidth = doc.documentElement.clientWidth-6;
  234.     },334);
  235. });