给你的网站加一个酷炫的封面

作为一个站长、博主,在N年前是一个很牛*的事,一提起自己有个博客/网站/论坛,旁人都会敬仰不已。

在今天,作为一个站长并不等于牛*,只有作为一个技术含量高的站长 或者 运营技巧超强的站长 又或者 极具吸金能力的站长 才能算得上在个人或者小团队网站队伍里面排得上号的人物,碎碎念作为苦逼普通博主中的一员,森森地感受到作为一个默默无闻的小青年那种无人问津的苦涩,呜呜呜~~~

呃,怎么越说越伤感呢?

要强大,咱得靠谁?
靠爹妈?我家不姓李!
靠朋友?咱都差不多啊!
还是得靠自己哟~

好啦,言归正传,最近好多博客好机油都在摩拳擦掌给自己的博客更换主题,@浅城 那个小婊砸居然在他博客三周年的时候推出了最新的主题,哎呀呀,正是让我这个琐事缠身的小屌丝好生羡慕,不行,我也得弄点新玩意出来,做主题是没时间也来不及了,就随手整个网站首屏大图封面好了。嗯,突然来个想法,碎碎念这种手痒族是说干就干了。嘿,靠着度娘都寻了好久,各种本地测试、在线测试,最后代码竟然只有几行,大伙围观去!

思路

先说说想法,雏形的想法是,在打开首页的时候,弹出一张华丽丽的大图,然后添加一点点说明文字,风格要一致,要简洁好看,然后点击特定文字的时候,首图收起,显示博客常规的首页布局。

怎么实现?

  1. 首先,通过jquery将首图的DIV整段代码插入到首页加载的body中,越靠前越好,最好是直接跟在<body>的后头;
  2. 在插入html后,再通过CSS样式将Div的显示细节定义出来,实现图片完全展示并保证在其他所有元素的最前端;
  3. 最后当点击进入按钮时,图片收起,显示博客常规首页,插入的DIV代码段移除掉。

示例代码

1.HTML代码(不需要写入,仅供参考)

<div id="wrap_cover"><section>不冲破城墙又岂知墙外风光?</section><div id="enterblog">进入博客>>>></div></div>

2.CSS样式

#wrap_cover{  
background: url('http://test.com/lulu.jpg') no-repeat fixed;
background-size: cover;
width: 100%;
height: 100%;
text-align: center;
font-size: 40px;
font-family: 楷体;
color: #cecece;
line-height: 200px;
text-shadow: 2px 1px 1px #333;
z-index: 9999;
position: fixed;
top:0;
left:0;
}
#enterblog{
position: absolute;
top: 45%;
left: 40%;
text-align: center;
cursor: pointer;}

3.jquery代码(含PHP)

<?php if(is_home() ){?> 
<script>
jQuery(document).ready( function(){
$('body').append("<div id='wrap_cover'><section>不冲破城墙又岂知墙外风光?</section><div id='enterblog'>访问碎碎念>>>></div></div>");
$("#enterblog").click(function(){
$("#wrap_cover").slideUp("550");
$("#wrap_cover").remove("1000");
})
});
</script>
<?php } ?>

因为我们只需要在打开首页的时候加载这段jQuery,其他页面不需要,所以加了个判断wordpress首页的语句。

等待大神优化

这段代码实在有点简陋,功能实现也很底层,路过的大哥大姐们如果有优化的思路,抬下你那郁郁葱葱,哦不,是玉葱的手指,在下面留个言讨论下呗~

(1)网速慢的时候,首页内容比加载封面更快显示出来,显得界面有点奇葩(>﹏<);
(2)封面往上滑动的时候,显得不太流畅,要是可以延迟滑动就好了;
(3)封面消失后,首页内容fadeIn淡入显示会衔接得更好些;
(4)其他,暂时没想到…

补充:

发现一个特严重体验问题,当你在首页翻页的时候,如果不是ajax无限加载,一旦翻到下一页发生刷新页面的动作,这个华丽丽的大图就又弹出来了,惹,真是让人心碎的体验啊!

于是乎,只好暂时把它挪一下,放到《读者排行》页面去了。
当然啦,要是可以把你的优化思路实现出来再贴上来就更好啦!!!

hongbao.png
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/wordpress/cover-page/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!