Steam Community :: 绝美动漫壁纸【2K版】

Store Page

Wallpaper Engine

All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Wallpaper Engine > Workshop > 大剑's Workshop > 绝美动漫壁纸【2K版】 > Discussions

绝美动漫壁纸【2K版】

Description Discussions1 Comments122 Change Notes

Want to join the discussion? You need to sign in or create an account.

Date Posted: 24 Sep, 2017 @ 9:09am

Posts: 8

Start a New Discussion

Discussions Rules and Guidelines

大剑 [developer] 24 Sep, 2017 @ 9:09am

希望大家多多收藏。感谢！这套壁纸可以做到：1替换图片和音乐；2改变字体颜色和图片切换时间。

在讨论之前，我要感谢COCOMEMOR大佬的代码，让我这个萌新能做出自己喜爱的美丽壁纸，
非常感谢！！！！！！
@@@@@@@替换背景音乐和背景图片的方法：

一.首先，替换背景图片和背景音乐要找到文件位置：
1.打开wallpaper engine壁纸软件
2.选择你要更改的壁纸后，右键→在资源管理器打开
3.接下来会弹出一个文件夹窗口。

二.仔细观察文件夹里面的子文件夹，你会发现有下面这些东西：
1. .idea (这个暂时没用，intelliJ IDEA自动生成的，不用管)
2. music （存放音乐文件，这里全部是.ogg格式音乐，这个壁纸的背景音乐来源于此）
2. mycss (存放叠层样式表的文件夹)
3. myfont （存放字体的文件夹，这个壁纸的签名字体来源于此）
4. myjs （存放JS代码文件，这个壁纸的雪花特效和时钟插件来源于此）
5. mypic （存放图片的文件夹，这个壁纸的背景图来源于此）
7. index.html （它是一个网页，WEB壁纸或许事实上就是一个网页）
8. preview.jpg （这个不用管，创意工坊显示的预览图）
9. project.json （json一种数据交换格式，知道可以更改壁纸操作界面描述就行）

三.如何替换BGM
参照上面第二部分，找到 music 文件夹。在里面你会发现有1~15.ogg格式音乐文件。
如果想要替换它们，把自己的音乐文件（比如.mp3之类的格式）转换为.ogg格式，并将名字改为1~15其中一个数字，替换掉之前文件夹的旧音乐文件。

四.如何增加删减和替换背景图片
参照上一步，找到mypic文件夹位置。再找到index.html文件→右键（打开方式→选择记事本），你会发现在<body>里面，有如下代码（记事本先别关闭）：
<div id="slideshow">
<img class="active" src="mypic/1.jpg"/>
<img src="mypic/2.jpg"/>
<img src="mypic/3.jpg"/> ←注意观察它们的规律，src="X"里面的X代表文件路径
<img src="mypic/4.jpg"/> 很容易发现图片就像第二部分所说的存放在mypic文件夹里面，
<img src="mypic/5.jpg"/> 然后打开mypic文件夹，你会发现1~30张图片文件。
<img src="mypic/6.jpg"/>
<img src="mypic/7.jpg"/>
<img src="mypic/8.jpg"/>
<img src="mypic/9.jpg"/>
<img src="mypic/10.png"/>
<img src="mypic/11.jpg"/>
<img src="mypic/12.jpg"/>
<img src="mypic/13.jpg"/>
<img src="mypic/14.jpg"/>
<img src="mypic/15.jpg"/>
<img src="mypic/16.jpg"/>
<img src="mypic/17.jpg"/>
<img src="mypic/18.jpg"/>
<img src="mypic/19.jpg"/>
<img src="mypic/20.jpeg"/>
<img src="mypic/21.jpg"/>
<img src="mypic/22.jpg"/>
<img src="mypic/23.jpg"/>
<img src="mypic/24.jpg"/>
<img src="mypic/25.jpg"/>
<img src="mypic/26.jpg"/>
<img src="mypic/27.jpg"/>
<img src="mypic/28.jpg"/>
<img src="mypic/29.jpg"/>
<img src="mypic/30.jpeg"/>
</div>

如果要替换它们，你得先将准备好图片放进去，并更改记事本里面的代码。怎么更改呢？
比如我要把一张名字为 abcdefg 的 jpg 格式的图片（abcdefg.jpg）放在循环播放的第一张，第一步当然是把图片进去mypic文件夹了，然后在记事本代码第一个<img class="active" src="mypic/1.jpg"/>改为→<img class="active" src="mypic/abcdefg.jpg"/> 如果要放在循环的第二张，就将记事本代码第二个<img src="mypic/2.jpg"/>改为→<img src="mypic/abcdefg.jpg"/> 依此类推。。。
当然这样很麻烦，不过建议将自己准备的30张图片名字先改为1~30里面的数字。然后替换掉mypic文件夹中的30张图片,再去更改记事本里买的代码。这样里你就只需要更改图片后缀即可。（你的图片1是jpg格式，就在mypic/1.X里面将X改为jpg）如果是PNG格式，就改为mypic/1.png

如果图片太多或太少，你都可以在<div>.....</div>里面删除或增加 <img src="mypic/文件名.图片格式"/>，比如我有31张图片，你就可以在<img src="mypic/30.jpeg"/>下一行加一个<img src="mypic/31.X"/>就成了下面这样
<div id="slideshow">
<img class="active" src="mypic/1.jpg"/>
。。。
。。。
。。。
<img src="mypic/30.jpeg"/>
<img src="mypic/31.X"/>图片格式为jpg你就把X改成jpg
</div>
减少图片的话你就删除一行。

不过增加或减少图片的话，还需要更改记事本里面如下代码

function changeSlide() { //切换图片的函数
slideOff(); //图片淡出
current++; //自增1
if(current>=30) current=0; ----------------------------→21张背景图片，就将此处30改为31即可，29张就改为29
slideOn(); //图片淡入
}

@@@@@@@改变字体颜色和图片切换时间
一。修改字体颜色
记事本不要关，在图片代码的下方有一段代码：
<img src="mypic/28.jpg"/>
<img src="mypic/29.jpeg"/>
<img src="mypic/30.jpg"/>

</div>

****************就是这行字的下面：
<span id="text" style="color:white"><div id="text" style="margin-left:10px;margin-right:auto;width:480px;position:relative;text-align:center;margin-bottom:60px;margin-top:-150px"><p style="font-family:'yq-lhy';margin-top:-115px;margin-bottom:-170px;font-size:59px"><span id="text01" style="font-family:'yq-lhy'">Less is more</span><span id="text03" style="font-family:'yq2-lhy'"></span><span style="font-family:'yq-lhy'">.</span></p>
<p style="font-family:'yq1-lhy';margin-top:175px;margin-bottom:-10px;font-size:50px"><span id="text02" style="font-family:'yq1-lhy'">Dream it possible</span><span id="text04" style="font-family:'yq3-lhy'"></span><span style="font-family:'yq-lhy'">.</span></p></div>

这一段代码<span id="text" style="color:white">里面可以修改字体颜色，你需要什么颜色就输入什么颜色的英文，比如你需要红色，那么这段代码就修改成<span id="text" style="color:red">。
里面的white修改成red。

二。更改每张图片停留时间（也就是多长时间切换一次图片）找到记事本里买的的如下代码
//每60s调用changeSlide函数进行图片轮播,单位为毫秒
var slideon=setInterval(changeSlide,60000); 注意到里面的60000，这里是指60000毫秒（60秒），你想？S变换一次图片，就将60000改为(？乘以1000)

Last edited by 大剑; 24 Sep, 2017 @ 6:27pm

< >

Showing 1-8 of 8 comments