给你的点点模板加入Win8屏保(屏风)

2012.10.05 分享 5577 人浏览 留言

之前很多博友在讨论给点点添加屏风的方法,也看到好多人都实现了,今天幻想给我们分享了一个win8屏保类型的屏风(我就当他是一个屏风吧,毕竟效果都是一样的)。

我测试了下,效果还是很不错的,但是有一些不足这里也说下:

1、因为是整个屏幕背景图,所以,要实现好的效果必须用分辨率较大的图,如幻想里面自带的一张图片,在我的笔记本中显示就不全面,因宽度不够,右侧被重复了。这个可以通过大图解决。

2、如果图片较大,就会引起另一个问题,博客打开载入速度慢,当然这要考虑你当前网络的带宽问题,本人现在在学校校园网,网速垃圾,所以载入速度太慢了点。

3、这个效果需要通过向上拉动才能实现跳转(暂用这个说法吧)进入真正的内容页,且提示不是很明显就一个简单的title,会让访客不知所措...当然这个拉动效果还是蛮炫的。

鉴于以上问题,我自己就没加上这个效果了,大家权衡下利弊可以考虑加入。

我的博客测试图:

以下是原文内容

幻想:

 登陆Win8的时候,首先看到的是一张很漂亮的屏保,然后把它推上去后才是登陆界面,很多人都非常喜欢,那么今天就为大家献上专为点点设计的Win8屏保。

下面让我来告诉大家怎么安到自己的博客里,灰常简单滴,尤其是安装过我开发的小插件的博主们对这个过程会更熟悉的。

步骤一:引用文件

<link rel="stylesheet" href="http://x.papaapp.com/farm1/df930b/4247d0f3/win8screensaver.css" type="text/css" media="all">
<script type="text/javascript" src="http://x.papaapp.com/farm1/df930b/96057385/win8screensaver.js"></script>

这个放在<head>与</head>之间就可以了,这里面一般会有一些子<link>和<script>的,跟它们放一块儿就可以了。

步骤二:

{#image:屏保图片|value:"http://m2.img.papaapp.com/farm4/2012/1005/15/C1C34C8B2F8A650A808F8FFAD956A8B138A80D05049E_1200_777.JPEG"}
<div class="screensaver" style="background-image:url({$_屏保图片});">
<div class="screenwork">
<div id="screentime">12:12</div>
<div id="screendate">10月5日, 星期五</div>
<div id="screennotes"><img src="{$global.cover_24}" /><span class="screennotes">{$global.notes_count}℃</span></div>
</div>
<div class="screenface" title="向上滑动解锁"></div>
</div>
<script type="text/javascript">
ddscreensaver();
</script>

这里的代码就是用来显示Win8屏保,另外还包括屏保图片自定义选项,这样大家就可以直接在自定义模板里面上传自己喜欢的图片了。如果你知道图片的地址,直接把第一行代码里面的图片的地址替换一下就可以了。

好了,安装完成了,简单吧。现在,你的博客也是拥有和Win8一样的屏保啦!

效果预览:在这里

文章地址:https://huilang.me/dd-win8-screensaver/

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif