经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
社会主义核心价值观,桌面鼠标点击特效
来源:cnblogs  作者:星期八再娶你  时间:2019/1/2 9:43:17  对本文有异议

受油猴子上的作者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是项目配置文件

  1. {
  2. "contentrating" : "Everyone",
  3. "description" : "鼠标点击特效,社会主义核心价值观。",
  4. "file" : "index.html",
  5. "general" :
  6. {
  7. "properties" :
  8. {
  9. "color" :
  10. {
  11. "order" : 7,
  12. "text" : "<br />颜色<br />Color<br />",
  13. "type" : "color",
  14. "value" : "1 1 1"
  15. },
  16. "image" :
  17. {
  18. "order" : 0,
  19. "text" : "<br />自定背景图<br />Background img<br />",
  20. "type" : "file"
  21. },
  22. "imageFill" :
  23. {
  24. "options" :
  25. [
  26. {
  27. "label" : "填充 Fill",
  28. "value" : 1
  29. },
  30. {
  31. "label" : "适应 Fit",
  32. "value" : 2
  33. },
  34. {
  35. "label" : "拉伸 Stretch",
  36. "value" : 3
  37. },
  38. {
  39. "label" : "平铺 Tile",
  40. "value" : 4
  41. },
  42. {
  43. "label" : "居中 Center",
  44. "value" : 5
  45. }
  46. ],
  47. "order" : 1,
  48. "text" : "<br />背景填充方式<br />Background fill style<br />",
  49. "type" : "combo",
  50. "value" : 3
  51. },
  52. "schemecolor" :
  53. {
  54. "order" : 0,
  55. "text" : "ui_browse_properties_scheme_color",
  56. "type" : "color",
  57. "value" : "0 0 0"
  58. }
  59. }
  60. },
  61. "monetization" : false,
  62. "preview" : "preview.jpg",
  63. "tags" : [ "Unspecified" ],
  64. "title" : "社会主义核心价值观",
  65. "type" : "web",
  66. "visibility" : "public",
  67. "workshopid" : "1609057588"
  68. }

 

 

 

index.html是网页文件,其中监听配置部分尤为重要,可以监视并设置壁纸文件等配置。

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>社会主义核心价值观</title>
  6. <style>
  7. html,body {
  8. width:100%;
  9. height:100%;
  10. margin:0;
  11. padding:0;
  12. overflow:hidden;
  13. }
  14. body {
  15. background-color:#000;
  16. background-position: center center;
  17. background-size: cover;
  18. background-image: url('1.jpg');
  19. }
  20. </style>
  21. </head>
  22. <body >
  23. <script>
  24. /* 监听配置 */
  25. window.wallpaperPropertyListener={
  26. applyUserProperties: function(properties){
  27. // 背景图
  28. if(properties.image){
  29. if(properties.image.value){
  30. document.body.style.backgroundImage = "url('file:///"+ properties.image.value +"')";
  31. }else{
  32. document.body.style.backgroundImage = "url('1.jpg')";
  33. }
  34. };
  35. // 背景图填充方式
  36. if(properties.imageFill){
  37. var size = '100% 100%';
  38. var repeat = 'no-repeat';
  39. switch(properties.imageFill.value){
  40. case 1: // 填充
  41. size = 'cover';
  42. break;
  43. case 2: // 适应
  44. size = 'contain';
  45. break;
  46. case 3: // 拉伸
  47. size = '100% 100%';
  48. break;
  49. case 4: // 平铺
  50. size = 'initial';
  51. repeat = 'repeat';
  52. break;
  53. case 5: // 居中
  54. size = 'initial';
  55. break;
  56. }
  57. document.body.style.backgroundSize = size;
  58. document.body.style.backgroundRepeat = repeat;
  59. };
  60. }
  61. }
  62. </script>
  63. </body>
  64. <script type="text/javascript" src="nn.js"></script>
  65. </html>

 

 

 

nn.js是脚本,复制来自cherry,并加以改进,以支持桌面特效。

  1. // ==UserScript==
  2. // @name 桌面点击特效,社会主义价值观
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.38
  5. // @description 1.随机颜色(可定制),2.随机大小(可定制),3.自动判断并引入jQuery,4.其他自定义
  6. // @author 星期八再娶你
  7. // @match http*
  8. // @include *
  9. // @exclude /(^[^:\/#\?]*:\/\/([^#\?\/]*\.)?xui\.ptlogin2\.qq\.com(:[0-9]{1,5})?\/.*$)/
  10. // @grant none
  11. // ==/UserScript==
  12. (function() {
  13. 'use strict';//说明:非原创,只是完善改进(我是在Tampermonkey.net复制并加已修改的),
  14. //^(?!.*graph\.qq\.com).*$
  15. var T_color = "";//字体颜色,你不设置就是随机颜色,
  16. var T_size = [88,99];//文字大小区间,不建议太大
  17. var T_font_weight = "bold";//字体粗斜度-->normal,bold,900
  18. var AnimationTime = 1500;//文字消失总毫秒
  19. var Move_up_Distance = 388;//文字移动距离,正数代表上移,反之下移
  20. var URL = window.location.href;
  21. var i = URL.search("/graph\.qq\.com/");
  22. if(i!=-1){
  23. console.log("error");
  24. return;
  25. }
  26. if(typeof jQuery == 'undefined'){//很奇怪"百度知道"为毛没有引入jQuery
  27. var scr = document.createElement("script");
  28. scr.src = "https://code.jquery.com/jquery-latest.js";//-->need https
  29. scr.charset = "utf-8";
  30. scr.type = "text/javascript";
  31. //document.documentElement.appendChild(scr);//-->error
  32. var head = document.getElementsByTagName("head")[0];
  33. head.appendChild(scr);
  34. }
  35. //
  36. setTimeout(function timer() {
  37. createSpecialEffects();
  38. },777);
  39. //
  40. //
  41. function createSpecialEffects(){
  42. try{
  43. $(document).ready(function(){});
  44. }catch(err){
  45. return;
  46. }
  47. var a_index = 0;
  48. $("html").click(function(e){
  49. var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
  50. var $i = $("<span/>").text(a[a_index]);
  51. a_index = (a_index + 1) % a.length;
  52. var x = e.pageX,y = e.pageY;
  53. var x_color = "#" + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);//-->随机颜色
  54. //console.log(x_color);
  55. if(T_color.length>=4){
  56. x_color = T_color;
  57. }
  58. var x_size = Math.random()*(T_size[1]-T_size[0]) + T_size[0];
  59. x_size += "px";
  60. $i.css({
  61. "z-index": 99999,
  62. "top": y - 100,
  63. "left": x,
  64. "position": "absolute",
  65. "font-weight": "bold",
  66. "font-size":x_size,
  67. "color": x_color
  68. });
  69. $("html").append($i);
  70. $i.animate({"top": y-Move_up_Distance,"opacity": 0},AnimationTime,function() {
  71. $i.remove();
  72. });
  73. });
  74. }
  75. //
  76. })();

 

 

欢迎订阅和分享我的steam,谢谢!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号