社會主義核心價值觀，桌面鼠標點擊特效

時間 2019-12-05

標籤社會主義核心價值觀桌面鼠標點擊特效简体版

原文原文鏈接

受油猴子上的做者cherry製做的「網頁鼠標點擊特效」啓發，因而稍加修改和製做，完成了Steam Wallpaper Engine版本的桌面鼠標點擊特效。javascript

Steam連接🔗：https://steamcommunity.com/sharedfiles/filedetails/?id=1609057588css

完成效果以下圖：html

鑑於原做者以及Steam WE上都是開放源代碼的，因此我也把源碼貼出來，供你們參考批評指正。java

下載後項目文件夾分佈圖以下：jquery

||---------1.jpg
||---------index.html
||---------nn.js
||---------preview.jpg
||---------project.jsonweb

preview.jpg是項目預覽圖，再Steam WE中能夠預覽。chrome

1.jpg是默認壁紙，用戶還能夠自定義壁紙。json

project.json是項目配置文件app

{
    "contentrating" : "Everyone",
    "description" : "鼠標點擊特效，社會主義核心價值觀。",
    "file" : "index.html",
    "general" : 
    {
        "properties" : 
        {
            "color" : 
            {
                "order" : 7,
                "text" : "<br />顏色<br />Color<br />",
                "type" : "color",
                "value" : "1 1 1"
            },
            "image" : 
            {
                "order" : 0,
                "text" : "<br />自定背景圖<br />Background img<br />",
                "type" : "file"
            },
            "imageFill" : 
            {
                "options" : 
                [
                    {
                        "label" : "填充 Fill",
                        "value" : 1
                    },
                    {
                        "label" : "適應 Fit",
                        "value" : 2
                    },
                    {
                        "label" : "拉伸 Stretch",
                        "value" : 3
                    },
                    {
                        "label" : "平鋪 Tile",
                        "value" : 4
                    },
                    {
                        "label" : "居中 Center",
                        "value" : 5
                    }
                ],
                "order" : 1,
                "text" : "<br />背景填充方式<br />Background fill style<br />",
                "type" : "combo",
                "value" : 3
            },
            "schemecolor" : 
            {
                "order" : 0,
                "text" : "ui_browse_properties_scheme_color",
                "type" : "color",
                "value" : "0 0 0"
            }
        }
    },
    "monetization" : false,
    "preview" : "preview.jpg",
    "tags" : [ "Unspecified" ],
    "title" : "社會主義核心價值觀",
    "type" : "web",
    "visibility" : "public",
    "workshopid" : "1609057588"
}

index.html是網頁文件，其中監聽配置部分尤其重要，能夠監視並設置壁紙文件等配置。dom

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>社會主義核心價值觀</title>
    <style>
        html,body {
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            overflow:hidden;
        }
        body {
            background-color:#000;
            background-position: center center;
            background-size: cover;
            background-image: url('1.jpg');
        }
    </style>
</head>
<body >
    <script>
        /* 監聽配置 */
        window.wallpaperPropertyListener={
            applyUserProperties: function(properties){
                // 背景圖
                if(properties.image){
                    if(properties.image.value){
                        document.body.style.backgroundImage = "url('file:///"+ properties.image.value +"')";
                    }else{
                        document.body.style.backgroundImage = "url('1.jpg')";
                    }
                };
                // 背景圖填充方式
                if(properties.imageFill){
                    var size = '100% 100%';
                    var repeat = 'no-repeat';
                    switch(properties.imageFill.value){
                        case 1: // 填充
                            size = 'cover';
                            break;
                        case 2: // 適應
                            size = 'contain';
                            break;
                        case 3: // 拉伸
                            size = '100% 100%';
                            break;
                        case 4: // 平鋪
                            size = 'initial';
                            repeat = 'repeat';
                            break;
                        case 5: // 居中
                            size = 'initial';
                            break;
                    }
                    document.body.style.backgroundSize = size;
                    document.body.style.backgroundRepeat = repeat;
                };
                
            }
        }
    </script>
</body>
<script type="text/javascript" src="nn.js"></script>
</html>

nn.js是腳本，複製來自cherry，並加以改進，以支持桌面特效。

// ==UserScript==
// @name         桌面點擊特效,社會主義價值觀
// @namespace    http://tampermonkey.net/
// @version      0.38
// @description  1.隨機顏色(可定製),2.隨機大小(可定製),3.自動判斷並引入jQuery,4.其餘自定義
// @author       星期八再娶你
// @match        http*
// @include      *
// @exclude      /(^[^:\/#\?]*:\/\/([^#\?\/]*\.)?xui\.ptlogin2\.qq\.com(:[0-9]{1,5})?\/.*$)/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';//說明:非原創,只是完善改進(我是在Tampermonkey.net複製並加已修改的),
    //^(?!.*graph\.qq\.com).*$
    
    var T_color = "";//字體顏色,你不設置就是隨機顏色,
    
    var T_size = [88,99];//文字大小區間,不建議太大
    
    var T_font_weight = "bold";//字體粗斜度-->normal,bold,900
    
    var AnimationTime = 1500;//文字消失總毫秒
    
    var Move_up_Distance = 388;//文字移動距離,正數表明上移，反之下移
    
    
    var URL = window.location.href;
    var i = URL.search("/graph\.qq\.com/");
    if(i!=-1){
        console.log("error");
        return;
    }

    if(typeof jQuery == 'undefined'){//很奇怪"百度知道"爲毛沒有引入jQuery
        var scr = document.createElement("script");
        scr.src = "https://code.jquery.com/jquery-latest.js";//-->need https
        scr.charset = "utf-8";
        scr.type = "text/javascript";
        //document.documentElement.appendChild(scr);//-->error
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(scr);
    }
    //
    setTimeout(function timer() {
            createSpecialEffects();

    },777);
    //
    //
    function createSpecialEffects(){
        try{
            $(document).ready(function(){});
           }catch(err){
            return;
        }
        var a_index = 0;
        $("html").click(function(e){
            var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");
            var $i = $("<span/>").text(a[a_index]);
            a_index = (a_index + 1) % a.length;
            var x = e.pageX,y = e.pageY;
            var x_color =  "#" + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);//-->隨機顏色
            //console.log(x_color);
            if(T_color.length>=4){
                x_color = T_color;
            }
            
            var x_size = Math.random()*(T_size[1]-T_size[0]) + T_size[0];
            x_size +=  "px";
            
            $i.css({
                "z-index": 99999,
                "top": y - 100,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "font-size":x_size,
                "color": x_color
            });
            $("html").append($i);
            $i.animate({"top": y-Move_up_Distance,"opacity": 0},AnimationTime,function() {
                $i.remove();
            });
        });
    }
    //



})();

歡迎訂閱和分享個人steam，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。