jpxgmn 批量图片查看 和 批量下载

jpxgmn 批量图片查看 、下载

Version vom 05.11.2021. Aktuellste Version

  1. // ==UserScript==
  2. // @name jpxgmn 批量图片查看 和 批量下载
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.3.2
  5. // @description jpxgmn 批量图片查看 、下载
  6. // @author nelsons
  7. // @match https://www.jpxgmn.com/*/*.html
  8. // @match https://www.jpxgmn.top/*/*.html
  9. // @match https://www.jpxgmn.net/*/*.html
  10. // @grant GM_addStyle
  11. // @grant GM_download
  12. // @require https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.js
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. // let buttonHtml = "<a id='download_show_btn' href=# target='_self' style='cursor:pointer;z-index:98;display:block;width:30px;height:64px;line-height:30px;position:fixed;left:0;top:300px;text-align:center; color: #000;font-size: x-large;background-color: #f7f7f9;border: 1px solid #e1e1e8; border-radius: 4px; box-shadow: inset 0 -3em 3em rgb(0 0 0 / 10%), 0 0 0 2px rgb(255 255 255 / 50%), 0.3em 0.3em 1em rgb(0 0 0 / 20%);'>下载</a>";
  17. let downloadView = `<div id="download-view" class="download-view" style="float: right; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); border-radius: 4px; padding: 16px; position: fixed; top: 0px; right: 0px; width: 50vw; z-index: 2147483645; overflow: scroll; height: 100%; display: none;">
  18. <div class="quanxuan-div"><input type="checkbox" id="quanxuan"/><span>全选</span></div>
  19. <div class="choose-btn">
  20. <button id="fanxuan">反选</button>
  21. <button id="download">下载</button>
  22. </div>
  23.  
  24. <div class="close-btn" id="close-btn">x</div>
  25. <div class="download-content">
  26.  
  27. </div>
  28. </div>`
  29. let btnHtml =`<svg id='download_show_btn' t="1635327432621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1003" width="200" height="200"><path d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7c3.2 4.1 9.4 4.1 12.6 0l112-141.7c4.1-5.2 0.4-12.9-6.3-12.9z" fill="#16c2c2" p-id="1004"></path><path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6 0.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4 14.9-19.2 32.6-35.9 52.4-49.9 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7-23.4 23.4-54.5 36.3-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z" fill="#16c2c2" p-id="1005"></path></svg>`
  30.  
  31. let addStyles = `.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in:before{background-position:0 0;content:"Zoom In"}.viewer-zoom-out:before{background-position:-20px 0;content:"Zoom Out"}.viewer-one-to-one:before{background-position:-40px 0;content:"One to One"}.viewer-reset:before{background-position:-60px 0;content:"Reset"}.viewer-prev:before{background-position:-80px 0;content:"Previous"}.viewer-play:before{background-position:-100px 0;content:"Play"}.viewer-next:before{background-position:-120px 0;content:"Next"}.viewer-rotate-left:before{background-position:-140px 0;content:"Rotate Left"}.viewer-rotate-right:before{background-position:-160px 0;content:"Rotate Right"}.viewer-flip-horizontal:before{background-position:-180px 0;content:"Flip Horizontal"}.viewer-flip-vertical:before{background-position:-200px 0;content:"Flip Vertical"}.viewer-fullscreen:before{background-position:-220px 0;content:"Enter Full Screen"}.viewer-fullscreen-exit:before{background-position:-240px 0;content:"Exit Full Screen"}.viewer-close:before{background-position:-260px 0;content:"Close"}.viewer-container{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.viewer-container::-moz-selection,.viewer-container ::-moz-selection{background-color:transparent}.viewer-container::selection,.viewer-container ::selection{background-color:transparent}.viewer-container:focus{outline:0}.viewer-container img{display:block;height:auto;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas>img{height:auto;margin:15px auto;max-width:90%!important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5);overflow:hidden}.viewer-list{-webkit-box-sizing:content-box;box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list>li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;-webkit-transition:opacity .15s;transition:opacity .15s;width:30px}.viewer-list>li:focus,.viewer-list>li:hover{opacity:.75}.viewer-list>li:focus{outline:0}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-loading{position:relative}.viewer-list>.viewer-loading:after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px}.viewer-list>.viewer-active,.viewer-list>.viewer-active:focus,.viewer-list>.viewer-active:hover{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;right:0;z-index:1}.viewer-player,.viewer-player>img{left:0;position:absolute;top:0}.viewer-toolbar>ul{display:inline-block;margin:0 auto 5px;overflow:hidden;padding:6px 3px}.viewer-toolbar>ul>li{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;-webkit-transition:background-color .15s;transition:background-color .15s;width:24px}.viewer-toolbar>ul>li:focus,.viewer-toolbar>ul>li:hover{background-color:rgba(0,0,0,.8)}.viewer-toolbar>ul>li:focus{-webkit-box-shadow:0 0 3px #fff;box-shadow:0 0 3px #fff;outline:0;position:relative;z-index:1}.viewer-toolbar>ul>li:before{margin:2px}.viewer-toolbar>ul>li+li{margin-left:1px}.viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px}.viewer-toolbar>ul>.viewer-small:before{margin:-1px}.viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar>ul>.viewer-large:before{margin:5px}.viewer-tooltip{background-color:rgba(0,0,0,.8);border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ccc;display:inline-block;font-size:12px;line-height:1;margin:0 5% 5px;max-width:90%;opacity:.8;overflow:hidden;text-overflow:ellipsis;-webkit-transition:opacity .15s;transition:opacity .15s;white-space:nowrap}.viewer-title:hover{opacity:1}.viewer-button{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;-webkit-transition:background-color .15s;transition:background-color .15s;width:80px}.viewer-button:focus,.viewer-button:hover{background-color:rgba(0,0,0,.8)}.viewer-button:focus{-webkit-box-shadow:0 0 3px #fff;box-shadow:0 0 3px #fff;outline:0}.viewer-button:before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-backdrop{background-color:rgba(0,0,0,.5)}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{-webkit-transition:all .3s;transition:all .3s}@-webkit-keyframes viewer-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes viewer-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.viewer-loading:after{-webkit-animation:viewer-spinner 1s linear infinite;animation:viewer-spinner 1s linear infinite;border:4px solid hsla(0,0%,100%,.1);border-left-color:hsla(0,0%,100%,.5);border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}}`
  32.  
  33. let addViews = "body{text-align: center;},"
  34. let addDownloadStyle = `
  35. .download-view {
  36. float: right;
  37. background-color: #f7f7f9;
  38. border: 1px solid #e1e1e8;
  39. border-radius: 4px;
  40. padding: 16px 16px;
  41. position: fixed;
  42. top: 0px;
  43. right: 0px;
  44. width: 50vw;
  45. z-index: 2147483645;
  46. overflow: scroll;
  47. height: 100%;
  48. }
  49.  
  50. .download-content {
  51. padding-top: 20px;
  52. padding-bottom: 20px;
  53. background-color: #f5f5f5;
  54. display: inline-block;
  55. }
  56.  
  57. .div-img-content {
  58. float: left;
  59. display: grid;
  60. padding: 4px 2px;
  61. background-color: #f7f7f9;
  62. border: 1px solid #e1e1e8;
  63. border-radius: 4px;
  64. margin-right: 5px;
  65. }
  66.  
  67. .div-img-content img {
  68. width: auto;
  69. height: 240px;
  70. }
  71.  
  72. .close-btn {
  73. display: inline-block;
  74. text-align: center;
  75. font-size: 20px;
  76. position: absolute;
  77. right: 30px;
  78. top: 18px;
  79. height: 32px;
  80. line-height: 32px;
  81. border-radius: 10px;
  82. border: 1px solid #aaa;
  83. width: 30px;
  84. }
  85. .quanxuan-div {
  86. float: left;
  87. width: 100px;
  88. height: 30px;
  89. }
  90.  
  91. .quanxuan-div input {
  92. width: 24px;
  93. height: 24px;
  94. }
  95.  
  96. .quanxuan-div span {
  97. font-size: 18px;
  98. margin-left: 6px;
  99. vertical-align: middle;
  100. }
  101. .icon {
  102. cursor: pointer;
  103. z-index: 98;
  104. display: block;
  105. width: 50px;
  106. height: 64px;
  107. line-height: 30px;
  108. position: fixed;
  109. left: 0;
  110. top: 300px;
  111. text-align: center;
  112. color: #000;
  113. }
  114.  
  115. .choose-btn {
  116. float: left;
  117. margin-top: 10px;
  118. display: block;
  119. margin-left: -84px;
  120. margin-top: 38px;
  121. },`
  122.  
  123. GM_addStyle(addStyles+addViews+addDownloadStyle)
  124.  
  125.  
  126. 'use strict';
  127.  
  128. var newViewer = $("<ul id =viewer style='display: inline-block !important;background-color: #f7f7f9;border: 1px solid #e1e1e8; border-radius: 4px; padding: 16px 16px;'></ul>");
  129.  
  130. var host = document.domain;
  131. var linkArr = new Array()
  132. var length = 0
  133.  
  134. var paginationExist = false
  135. $(".pagination ul").each(function () {
  136. if (paginationExist == true) {
  137. return false;
  138. }
  139.  
  140. length = $(this).find("a").length
  141. $(this).find('a').each(function(index, value) {
  142. if (index <= length-2) {
  143. linkArr.push($(this).attr('href'))
  144. }
  145. });
  146.  
  147. paginationExist = true;
  148. })
  149.  
  150. $("body").empty();
  151. //$("body").append(buttonHtml);
  152. $("body").append(newViewer);
  153. $("body").append(downloadView);
  154. $("body").append(btnHtml);
  155.  
  156. $.each(linkArr,function(index,value){
  157. var itemArr = $('<li></li>');
  158. $.get( value, function( data ) {
  159.  
  160. var image = $(".article-content img", data);
  161.  
  162. image.each(function(item){
  163. var imgUrl = $(this).attr('src')
  164. var imageItem ='<img width= "300" style="float:left;" src="' + imgUrl + '" >';
  165.  
  166. itemArr.append(imageItem)
  167.  
  168. var downloadItem = '<div class="div-img-content"><img src="' +imgUrl+ '"><input type="checkbox" class="imgBtnBox" value="'+imgUrl+'"/></div>';
  169. $(".download-content").append(downloadItem)
  170.  
  171. });
  172. })
  173. newViewer.append(itemArr)
  174. });
  175.  
  176. setTimeout(() => {
  177. var viewer3 = new Viewer(document.getElementById('viewer'),{
  178. viewed() {}
  179. } );
  180. },3000);
  181.  
  182. $("#download_btn").click(function(event){
  183. GM_download('https://www.jpxgmn.top/uploadfile/202109/5/F4175918381.jpg', `pic`);
  184. });
  185.  
  186. var i;
  187. var li = document.getElementsByTagName("input");
  188. var quanxuan = document.getElementById("quanxuan");
  189. var fanxuan = document.getElementById("fanxuan");
  190. var imgBtnBox = document.getElementsByClassName("imgBtnBox");
  191. var download = document.getElementById("download");
  192. var closeBtn = document.getElementById('close-btn');
  193. var downloadShowBtn = document.getElementById('download_show_btn');
  194. var isShow = false; // 默认div显示
  195.  
  196. //全选和全不选框
  197. quanxuan.onclick = function () {
  198. for (i = 0; i < li.length; i++) {
  199. li[i].checked = this.checked;
  200. }
  201. }
  202.  
  203. //按钮反选
  204. fanxuan.onclick = function () {
  205. for (i = 0; i < li.length; i++) {
  206. li[i].checked = !li[i].checked;
  207. }
  208. for (i = 0; i < imgBtnBox.length; i++) {
  209. if (!imgBtnBox[i].checked) {
  210. quanxuan.checked = false;
  211. return;
  212. }
  213. }
  214. }
  215. //给所有水果选项绑定单击事件
  216. for (i = 0; i < imgBtnBox.length; i++) {
  217. imgBtnBox[i].onclick = function () {
  218. for (var j = 0; j < imgBtnBox.length; j++) {
  219. if (!imgBtnBox[j].checked) {
  220. quanxuan.checked = false;
  221. return;
  222. }
  223. }
  224. quanxuan.checked = true;
  225. }
  226. }
  227.  
  228. //提交按钮
  229. download.onclick = function () {
  230. var imgSort = 1
  231. for (i = 0; i < imgBtnBox.length; i++) {
  232. if (imgBtnBox[i].checked) {
  233. var url = imgBtnBox[i].value
  234. var filename = url.substring(url.lastIndexOf('/')+1);
  235.  
  236. GM_download(url, `img-${imgSort}`);
  237. imgSort++;
  238. }
  239. }
  240.  
  241. }
  242.  
  243. // closeBtn.hide()
  244. // 显示或者隐藏
  245. closeBtn.onclick = function () {
  246. document.getElementById("download-view").style.display = "none";
  247. isShow = false
  248. }
  249.  
  250. downloadShowBtn.onclick = function () {
  251. document.getElementById("download-view").style.display = "inline-block";
  252. isShow = false
  253. }
  254.  
  255. })();