1
// ==UserScript==
2
// @name         B站图片爬取
3
// @namespace    http://tampermonkey.net/
4
// @version      0.1
5
// @description  try to take over the world!
6
// @author       You
7
// @match        https://www.bilibili.com/*
8
// @grant        none
9
// @resource     customCSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
10
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js
11
// @require      https://cdn.jsdelivr.net/npm/vue
12
// ==/UserScript==
13

14
(function () {
15
  "use strict";
16
  $("head").append($(`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">`));
17
  var divApp = $(
18
    `
19
<div style="position:fixed; z-index:1000;top: 80vh;left: 5vw" id="myPlan">
20
  <div v-if="showMassage" style="position: fixed;z-index: -1;width: 100vw;height: 100vh;top: 0;right:0;background-color:rgba(0,0,0,0.5);"></div>
21
  <button class="btn btn-primary" @click="showM">提取图片</button>
22
  <div v-if="showMassage"
23
       class="container"
24
       style="position:fixed;background-color:rgba(0,0,0,0.5);;display: flex;flex-wrap: wrap;overflow: auto;width: 600px;height: 500px;top: 50%;left: 50%;transform: translate(-50%, -50%);">
25
       <div  v-for="(image,index) in images"  :key="index">
26

27
       <a :href="image.src" target="frame1"><img :src="image.src" class="rounded float-left" style="min-width: 100px;margin: 10px;height: 80px" alt=""></a>
28
</div>
29
</li>
30
</div>
31
</div>
32
</div>`
33
  );
34
  $("#app").append(divApp);
35

36
  /*Vue操作*/
37
  var app = new Vue({
38
    el: "#myPlan",
39
    data: {
40
      showMassage: false,
41
      images: []
42
    }, methods: {
43
      showM() {
44
        this.showMassage = !this.showMassage;
45
        this.images = $("img");
46
      }
47
    }
48
  });
49

50
})();

1
// 普通的函数声明
2
function a(){}
3

4
// 匿名函数
5
let a = function(){}
6

7
// 调用函数
8
a();
9

10
// (function(){})() 就相当于是声明了一个匿名函数，并且调用
11
// 等价于上面的先声明 function a(){} 再调用 a()

1
$("head").append($(`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">`));

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

1
// ==UserScript==
2
// @name         旋转图片
3
// @namespace    http://tampermonkey.net/
4
// @version      0.1
5
// @description  try to take over the world!
6
// @author       You
7
// @include      *
8
// @grant        none
9
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js
10
// ==/UserScript==
11

12
(function () {
13
  'use strict';
14
  $('head').append($(`
15
  <!-- CSS部分 -->
16
  <style>
17
  .ha-image {
18
    position: relative;
19
  }
20
  .ha-button {
21
      display: none;
22
      top: 0;
23
      left: 0;
24
      position: absolute;
25
      z-index: 1;
26
  }
27
  .ha-image:hover>.ha-button  {
28
    display: inline-block;
29
  }
30
  </style>`));
31
  /* 给图片增加一个父元素，方便操作 */
32
  let divApp = $(`
33
     <div class="ha-image"></div>
34
  `);
35
  /* 按钮部分 */
36
  let rotateButton = $(`
37
    <div class="ha-button">
38
      <button class="leftRotate90">旋转90度</button>
39
      <button class="rightRotate180">旋转180度</button>
40
      <button class="rightRotate270">旋转270度</button>
41
      <button class="reset">还原</button>
42
    </div>
43
  `);
44
  let images = $('img');
45
  images.wrap(divApp);
46
  $('.ha-image').append(rotateButton);
47
  $('.leftRotate90').click(function () {
48
    let image = $(this).parent().parent().children('img');
49
    image.css('transform', 'rotate(90deg)');
50
    return false; //阻止事件冒泡
51
  });
52
  $('.rightRotate180').click(function () {
53
    let image = $(this).parent().parent().children('img');
54
    image.css('transform', 'rotate(180deg)');
55
    return false;
56
  });
57
  $('.rightRotate270').click(function () {
58
    let image = $(this).parent().parent().children('img');
59
    image.css('transform', 'rotate(270deg)');
60
    return false;
61
  });
62
  $('.reset').click(function () {
63
    let image = $(this).parent().parent().children('img');
64
    image.css('transform', 'rotate(0)');
65
    return false;
66
  });
67
})();