用Javascript给Zblog文章摘要列表制作打开隐藏特效

编程开发 / , , / at

1:保存以下Javascript代码为sh.js文件

function showhide(id,sh){
try{
if(document.getElementById(id)){
if(document.getElementById(id).style.display=='none'){
document.getElementById(id).style.display='block';
sh.className="show"
}else{
document.getElementById(id).style.display='none';
sh.className="hide"
}
}
}catch(e){}
}

2:在首页或者列表页head区加入以下代码

<script language="Javascript" src="sh.js" type="text/javascript"></script>

3:保存以下图标中的任一个到Z-blog的/THEMES/default/sytle/default目录(举例)
特意精选并制作了7个图标,具体大小位置如下,可以根据你Zblog的页面设计挑选,使用方法和介绍见第5条
打开隐藏箭头
打开隐藏箭头
打开隐藏箭头
打开隐藏箭头
打开隐藏箭头
打开隐藏箭头

/* 12*12 */
background-position: -6px -6px;
background-position: -6px -30px;
/* 9*13 */
background-position: -7px -7px;
background-position: -7px -33px;
/* 9*10 */
background-position: -5px -5px;
background-position: -5px -25px;
/* 11*11 */
background-position: -6px -6px;
background-position: -6px -28px;
/* 10*9 */
background-position: -5px -5px;
background-position: -5px -23px;
/* 13*11 */
background-position: -6px -6px;
background-position: -6px -28px;

4:找到列表模板文件b_article-multi.html
把要隐藏的部分用放在

<div class="sh" id="sh-<#article/id#>"></div>

把要放按钮的地方这样写

<div class="show" onclick='showhide("sh-<#article/id#>",this);'></div>

5:css里写,提到css sprites
1>给post-title加个float:left;,这和下面.show,.hide的float: right;在一块保证按钮和标题同行显示。
并适当调整post-title的width
2>加上

/* 定义按钮整体样式 */
.show,.hide{
 float: right;
 width: 11px;
 height: 11px;
 margin: 6px 12px 0 0;
 display: inline;
 background-image: url('default/sh.gif');
 background-repeat: no-repeat;
 cursor: pointer;
}
/* 用css sprites定义图片展开和隐藏时按钮图标的切换 */
.show{background-position: -6px -6px;}
.hide{background-position: -6px -28px;}
/* 禁止下面的内容自动填充到float之间的区域 */
.sh{
 clear:both;
}

这里用到了css sprites,优点在于在切换展开和隐藏列表时,避免图标按钮的加载延时;并且减少服务器的http请求,从而实现了图片的web加速。

一条回应:“用Javascript给Zblog文章摘要列表制作打开隐藏特效”

  1. […] GlobeTour的传说 « 用Javascript给Zblog文章摘要列表制作打开隐藏特效 在IIS上安装PHP5.3以后版本 […]

发表评论

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