点击排行
|
评论排行
|
16
Jul
说明：
这是一个很好的图片浏览特效，与lightbox特效相比，最大的优势在于它不需要将网页加载完就能加载特效了
先看演示效果：请点击图片并可拖动
1、解压得到两个文件夹，上传到blog根目录覆盖原文件（注意备份inc\ubb.php）
2、进入后台，创建一个head模块，代码如下：
注：你可以修改上面的样式使其更匹配你的模板，如果你不是很懂CSS，那么只建议你修改上面样式表中的颜色部分。
3、如果你的模版CSS文件定义了如下的图片边框样式：
例：
转载请注明：汉化＋移植：叶阳博客 http://blog.nzye.com
下载已更新：http://blog.nzye.com/highslide-333/
这是一个很好的图片浏览特效，与lightbox特效相比，最大的优势在于它不需要将网页加载完就能加载特效了
先看演示效果：请点击图片并可拖动
1、解压得到两个文件夹，上传到blog根目录覆盖原文件（注意备份inc\ubb.php）
2、进入后台，创建一个head模块，代码如下：
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
<style type="text/css">
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 1px solid #666666;
padding: 3px;
background-color: #292929;
}
.highslide:hover img {
border: 1px solid #666666;
padding: 3px;
background-color: #FFFFFF;
}
.highslide-image {
border: 1px solid white;
padding: 3px;
background-color: #FFFFFF;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 1px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 12pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
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;
}
a.highslide-full-expand {
background: url(highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
<style type="text/css">
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 1px solid #666666;
padding: 3px;
background-color: #292929;
}
.highslide:hover img {
border: 1px solid #666666;
padding: 3px;
background-color: #FFFFFF;
}
.highslide-image {
border: 1px solid white;
padding: 3px;
background-color: #FFFFFF;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 1px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 12pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
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;
}
a.highslide-full-expand {
background: url(highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
注：你可以修改上面的样式使其更匹配你的模板，如果你不是很懂CSS，那么只建议你修改上面样式表中的颜色部分。
3、如果你的模版CSS文件定义了如下的图片边框样式：
例：
.insertimage {
border: 1px solid #E7F1D4;
padding: 3px;
background-color: #FFFFFF;
}
请注释或删除！！！！border: 1px solid #E7F1D4;
padding: 3px;
background-color: #FFFFFF;
}
转载请注明：汉化＋移植：叶阳博客 http://blog.nzye.com
下载已更新：http://blog.nzye.com/highslide-333/
相关日志
博客男女测试
YeYo-Skin02 模板发布
bo-blog 2.1.0 正式版留言簿头像位置显示不正确修正补丁
本站模板更换为YeYo-Skin03
highslide图片浏览特效更新至3.3.3 For Bo-blog2.1.0正式版
博客男女测试
YeYo-Skin02 模板发布
bo-blog 2.1.0 正式版留言簿头像位置显示不正确修正补丁
本站模板更换为YeYo-Skin03
highslide图片浏览特效更新至3.3.3 For Bo-blog2.1.0正式版
作者：
jazibal模版FOR Bo-blog 2.0.3（会员下载）
Joomla1.0.13_cn-utf-8_By_yeyo美化安装包
之前我的图片，都是手动缩小到合适的尺寸的。
不过我图片都被自己缩小了 嘻嘻
我还吓了一跳啊
这个特效好 不过怕拖慢速度 呵呵 还是不用了