PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Spring Festival is coming, to dig gold website posted a couplet, couplet type advertising in various websites now a lot of, read this article, you will know that although those advertising space is quite expensive, but it is not complicated to achieve.

For example, the advertising in the starting point, read the novel for many years, the novel is constantly changing, the advertising is also constantly changing, only the advertising position stands.

Finally, I will output this code into an oil monkey script and put it on Github. You can view and install it by yourself. You can give more advice or help improve the project.

The code used this time (no more than four or five lines)

<div id="juejin-duilian-left" style="position: fixed; left:0%; bottom: 26%; z-index: 999; width: 70px; text-align: center;">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px; font-family: STXingkai;">One hundred years of heaven and earth back</span>
</div>

<div id="juejin-duilian-right" style="position: fixed; right:0%; bottom: 26%; z-index: 999; width: 70px; text-align: center;">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px; font-family: STXingkai;">Unitary peace between mountains and rivers</span>
</div>
Copy the code

Debug the position of couplets, one left and one right

We need to debug the position of the couplet and force the code we prepared into it directly through F12, as shown in the picture:

Here, I adjusted the bottom property to adjust the position of the top and bottom. In fact, I can make a vertical center and improve it later.

By adding this code, we should see what the following image looks like on the page.

The font I choose this time is Huawei running script, couplets, naturally some elegant good.

Make a background picture for the couplet

After writing the couplet, it is necessary to make a background picture for the couplet. The New Year is approaching, so change the background of the festive point.

Select a random image as the background, and set the background property to the code.

As follows:

<div id="juejin-duilian-left" style="position: fixed; left:0%; bottom: 26%; z-index: 999; width: 70px; text-align: center; background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a788ebf3e0d34af4a90c3968d40282a8~tplv-k3u1fbpfcp-watermark.image' );">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px; font-family: STXingkai;">One hundred years of heaven and earth back</span>
</div>

<div id="juejin-duilian-right" style="position: fixed; right:0%; bottom: 26%; z-index: 999; width: 70px; text-align: center; background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a788ebf3e0d34af4a90c3968d40282a8~tplv-k3u1fbpfcp-watermark.image' );">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px; font-family: STXingkai;">Unitary peace between mountains and rivers</span>
</div>
Copy the code

From there, we have the first version of the effect.

Optimize and perfect, go directly to make a more good-looking couplet

Create a beautiful couplet and place the image directly in the div.

Code:

<div id="juejin-duilian-left" style="position: fixed; left:0%; bottom: 26%; z-index: 999;">
    <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/510788335a224e45b4f694e23dcb3e6f~tplv-k3u1fbpfcp-watermark.image" alt="" style="width: 90px;">
</div>

<div id="juejin-duilian-right" style="position: fixed; right:0%; bottom: 26%; z-index: 999;">
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/586b5188c665414a8088b6b7450aa6fa~tplv-k3u1fbpfcp-watermark.image" alt="" style="width: 90px;">
</div>
Copy the code

Final effect:

There was a problem

Since filling the code directly under the body would cause the nuggets to fail when switching pages, I found several places to fill the code and ended up in the bottom div.

Output the oil monkey script

Oil monkey script is simple, not too in-depth research, a little rough, we forgive.

Share with you the script code, you can add to the oil monkey. You can also go to Github to download, by the way to give a start what is the best, thank you.

// ==UserScript==
// @name Juejin Spring Festival new outfit
// @name: zh-cn
// @namespace https://github.com/Ijiran/pxyz-script
/ / @ version 0.1
// @description Juejin
// @description:zh-CN put on a new look for the nuggets website and put up two couplets
// @author curly brackets
// @match https://juejin.cn/*
// @license MIT License
// @grant none
// @run-at document-end
// @grant GM_xmlhttpRequest
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
/ / @ the require http://code.jquery.com/jquery-1.11.0.min.js
// ==/UserScript==

(function() {
    'use strict';

    $(document).ready(function () {
         var duilianHtml = "
      

       \n"
      
 +
                " \n" +
                "</div>\n" +
                "\n" +
                "
      

       \n"
      
 +
                " \n" +
                "</div>";

    $(".global-component-box").append(duilianHtml);
    })

})();
Copy the code

Comments, likes and comments are welcome.