社會主義核心價值觀，桌面鼠標點擊特效
阿新 • • 發佈：2018-12-31
tar order 作者 remove desc exclude 消失 判斷 100%
||---------project.json
受油猴子上的作者cherry制作的“網頁鼠標點擊特效”啟發，於是稍加修改和制作，完成了Steam Wallpaper Engine版本的桌面鼠標點擊特效。
Steam鏈接??：https://steamcommunity.com/sharedfiles/filedetails/?id=1609057588
完成效果如下圖：
鑒於原作者以及Steam WE上都是開放源代碼的，所以我也把源碼貼出來，供大家參考批評指正。
下載後項目文件夾分布圖如下：
||---------1.jpg
||---------index.html
||---------nn.js
||---------project.json
preview.jpg是項目預覽圖，再Steam WE中可以預覽。
1.jpg是默認壁紙，用戶還可以自定義壁紙。
project.json是項目配置文件
{
"contentrating" : "Everyone",
"description" : "鼠標點擊特效，社會主義核心價值觀。",
"file" : "index.html",
"general" :
{
"properties" :
{
"color" :
{
"order" : 7,
"text" : "<br />顏色<br />Color<br />",
"type" : "color",
"value" : "1 1 1"
index.html是網頁文件，其中監聽配置部分尤為重要，可以監視並設置壁紙文件等配置。
<!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(); }); }); } // })();
歡迎訂閱和分享，謝謝！
社會主義核心價值觀，桌面鼠標點擊特效