WORDPRESS THEME:ENCORE

我很高兴，我的又一个主题诞生了，她叫ENCORE。
虽然她在不同的济览器眼里还存在着美的差异，但没关系，我对她进行了剖腹产。

因为之前的使用的LOSING MY RELIGION，使用了肥胖的JS脚本，很多朋友说博客的载入速度太慢了。怎么能这样呢？不行！本来我用的BH主机就已经够慢了，老帕不能再用一个残忍的wordpress主题来虐待到老帕博客一游的同志们！

所以，现在这个wordpress主题–ENCORE，放弃了花哨的滑动门效果，使用了同样花哨的悬停效果和DIV层的隐藏，虽然也使用了JS文件，但总的JS文件加起来不超过3KB！

先来看一下这个主题的外貌，当然，你现在进我的博客，我已经使用着这个WORDPRESS主题了，但还是截图展示一下，说不定过不了两天，我又换WORDPRESS主题了呢。

悬浮效果——CSShover.htc

在中间栏的部分有一个订阅选项，把鼠标放在上面，就会悬浮出订阅按钮列表，这个效果其实在IE和firefox下是很容易实现的，用*.hover和display配合就可以了，但是IE6是不支持除了a以外的其它:hover形式的。

所以，就要使用我之前介绍过的csshover:htc这个文件，这个文件的作用就是让IE6支持*.hover的形式，这个*代表所有的DIV元素。不止是:hover，这个文件的最新版本还支持:active和:focus，只要你愿意去试验，可以利用这些属性制作出很多特别的效果来！

比如说，如果你够细心，你会发现这个主题header部分的”帕兰映像+”和”帕兰卓一得“，正常状态下分别是白色和蓝色，如果鼠标放在上面的话，又分别变成蓝色和白色。当然，这只是个小小的效果，但要知道，如果没有csshover.htc这个文件的话，要在IE6下实现这个效果尽管也可以，但是很麻烦，且布局势必要相当的不规范。

滤镜透明效果——opacity

这种效果我上一个主题就使用了，就是用opacity这个属性把图片变的透明，而鼠标浮在上面的时候又变面原来清晰的图，这个效果看上去挺美，不是吗？

其实opacity是filter这个属性的一个选项，下面是一个简单的代码示例：


.entry a img{filter:alpha(opacity:25);-moz-opacity:0.25;}
.entry a img:hover{{filter:alpha(opacity:100);-moz-opacity:1;}

这串CSS代码的作用就是给日志的entry层里所有的带链接的图片设置一个25%的不透明度，而当鼠标悬浮在上面的时候，不透明值为100%，就 变成了原图。当然，这个效果还有延伸的运作，比如设置渐变，透明的起始方位和结束方位等，有兴趣的朋友可以去搜一下更详细的介绍。

另外，你可能注意到了里面的-moz-opacity代码,这串代码是Firefox的专用代码，因为前面的代码并不适用于Firefox。幸哉！我们的Firefox给了一些专用代码，且这些代码都很简单易用。

DIV滑动效果

这是利用一串简单的JS代码配合DIV层的隐藏/显示达到的滑动效果。嗯，我承认，这其实不算标准的滑动效果，只是悬停效果的一种投机取巧罢了。

JS文件实现的点击隐藏/关闭效果

默认情奖品下，这个留言的commentslist是隐藏的。当你点”RESPOND TO THIS POST”的时候，commentslist就滑出来了。这同样是个很简单的JS文件实现的。

下面是JS文件




function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}

复制到记事本，给它取个名字，我叫它toggle.js
然后在你的里面加入下面这句话:

<script src=”http://paranimage.com/wp-admin/%3C?php%20bloginfo%28%5C%27template_directory%5C%27%29;%20?%3E/js/toggle.js” type=”text/javascript”></script>

再然后：

<a href=”javascript:;” onmousedown=”toggleDiv(’cccbox’);” style=”color: #ffffff”></a></code>
<p id=”cccbox” style=”display: none”> </p>

看懂了吗?toggleDiv(’ccc’)和div id=”cccbox”这两个地方的名字要一样，那上面的a属性里面的内容就控制着div层的隐藏和显示。

Eminem-《ENOCORE》

我之所以发起神经设计这个主题，是因为昨天下午在翻我那堆打口的时候把阿姆的《ENCORE》又翻了出来，看着封面，设计WORDPRESS主题的冲动就亢亢的冒了起来。

下面两张图分别是这张 《ENCORE》大碟的封面和歌词底部的背面。讽刺吧！
有兴趣的朋友还可以去看看同名曲”ENCORE”的MV,在歌曲的最后，有疯狂的歌迷在大叫着”Encore!Encore!”，阿姆拿起枪对着一个歌迷就是一枪，然后离场。哈哈！

下面的这两张图片我本来是用来放在comments部分的，正常时显示的是封面的这张图片，当鼠标浮在上面时，显示的是背后藏枪的这张图片，且效果 我个人觉得非常酷，可这两张图片的容量太大了，尽管我试着用压缩软件把这两张图片压缩了一下，但最终还是有30KB，在页面上下滑动的时候非常之卡（我试 过压成10KB,但图片被压的过于的印象派了）。所以，只有放弃了。哎！

最后，说明一下，这个主题的POST标题部分参照了IAMWW的W2_DND，包括上面介绍的toggle.js文件，也是从这个主题里面学来的。

来源于 WORDPRESS THEME:ENCORE | 帕兰映像