Steam Wallpaper Engine版本桌面滑鼠點擊特效社會主義核心價值觀
受油猴子上的作者cherry製作的「網頁滑鼠點擊特效」啟發，於是稍加修改和製作，完成了Steam Wallpaper Engine版本的桌面滑鼠點擊特效。
Steam鏈接：https://steamcommunity.com/sharedfiles/filedetails/?id=1609057588
完成效果如下圖：
鑒於原作者以及Steam WE上都是開放源代碼的，所以我也把源碼貼出來，供大家參考批評指正。
下載後項目文件夾分布圖如下：
||---------1.jpg
||---------index.html
||---------nn.js
||---------preview.jpg
||---------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"
},
"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是網頁文件，其中監聽配置部分尤為重要，可以監視並設置壁紙文件等配置。
<!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();
});
});
}
//
})();
作者：星期八再娶你
原文：https://www.cnblogs.com/hupo376787/p/10202019.html
版權歸作者所有
※Crunch團隊分享SpringCloud微服務的使用經驗
※使用Spring-boot快速啟動Spring應用
TAG:程序員小新人學習 |