说明：这是一个很好的图片浏览特效，与lightbox特效相比，最大的优势在于它不需要将网页加载完就能加载特效了
先看演示效果：请点击图片并可拖动

1、解压得到两个文件夹，上传到blog根目录覆盖原文件（注意备份incubb.php）
2、进入后台，创建一个模块，代码如下：

<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>

<style type="text/css">
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 1px solid #DCDCDC;
padding: 5px;
background-color: #FFFFFF;
}
.highslide:hover img {
border: 1px solid #333333;
padding: 5px;
background-color: #FFFFFF;
}

.highslide-image {
border: 1px solid white;
padding: 5px;
background-color: #FFFFFF;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 1px solid white;
border-top: none;
font-family: Tahoma,Verdana, Helvetica;
font-size: 12px;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: white;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 12px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
</style>

3、如果你的模版CSS文件定义了如下的图片边框样式：
例：

.insertimage {
border: 1px solid #E7F1D4;
padding: 3px;
background-color: #FFFFFF;
}

请注释或删除！！！！
点此下载

Tags：代码