21 Aug

利用highslide实现嵌入页面弹出特效

分类:我的作品   出处:本站原创                            | |
效果见侧栏菜单中的“看看视频和听听音乐”。
本来不打算发布这个的,看见有博友要,现说一下实现的方法:
1、这个特效需配合highslide图片浏览特效For Bo-blog 的JS一起使用;如果你没有装highslide图片浏览特效For Bo-blog,那么请先去http://blog.nzye.com/read.php/254.h...下载附件,获取里面的JS文件。
2、下载附件,解压上传到highslide目录下。
3、后台新建一个highslidehtml模块,代码如下:
<script type="text/javascript" src="highslide/highslide-html.js"></script>
<script type="text/javascript">    
   hs.graphicsDir = 'highslide/graphics/';
   hs.outlineType = 'rounded-white';
   hs.outlineWhileAnimating = true;
   hs.objectLoadTime = 'after';
   window.onload = function() {
       hs.preloadImages();
   }
</script>

<style type="text/css">
}
.highslide {
   text-decoration:none;
   color: #666;
}
.highslide-html {
   background-color: white;
}
.highslide-html-content {
 position: absolute;
   display: none;
   text-align:center;
}
.highslide-loading {
   display: block;
 color: black;
 font-size: 8pt;
 font-family: sans-serif;
 font-weight: bold;
   text-decoration: none;
 padding: 2px;
 border: 1px solid black;
   background-color: white;
}

.control {
 float: right;
   display: block;
   /*position: relative;*/
 margin: 0 5px;
 font-size: 9pt;
   font-weight: bold;
 text-decoration: none;
 text-transform: uppercase;
 color: #999;
}
.control:hover {
 color: black !important;
}
.highslide-move {
   cursor: move;
}

.highslide-display-block {
   display: block;
}
.highslide-display-none {
   display: none;
}
</style>

4、在需要嵌入的地方加上类式下面的网页代码:
<a href="你的嵌入页面" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html', objectType: 'iframe', objectWidth: 680, objectHeight: 525} )" class="highslide">
 看看视频
</a>
<div class="highslide-html-content" id="highslide-html" style="width: 680px">
 <div class="highslide-move" style="border: 0; height: 18px; padding: 2px; cursor: default">
     <a href="#" onclick="return hs.close(this)" class="control">关闭</a>
<a href="#" onclick="return false" class="highslide-move control">温馨提示:按此移动窗口到不影响你阅读日志的地方--如果窗口一直跟随鼠标,请按ESC关闭窗口!</a>
 </div>
 <div class="highslide-body"></div>
</div>

如果需要嵌入多个页面,请重复上面的代码并根据你的实际情况调整高宽度即可。
如需转载请注明:
汉化及移植:叶阳博客 http://blog.nzye.com/index.php
36865 次阅读
6 条评论
0 条引用
晴 作者:yeyo   时间:09:15   Tags: , , ,
laomu
2007.11.03 02:32
那要怎么设置才能成老哥你这样的呢

什么框架还有怎么才能把那些申请连接相册音乐开关设置进去呢
simear2004 回复于 2007.11.03 17:07
你去论坛仔细看看FMP1.6这个插件说明吧,弄懂了怎么搞这个播放器的框架,我再告诉你开关的代码
laomu
2007.11.01 21:52
我用了这个东东怎么不跟你这一样啊

你这个是在右面栏里

我的直接跑到页面的最上面了

也不像你这样好看

也不知道参数怎么设置

等回复。。。
simear2004 回复于 2007.11.01 23:22
你的看到的是正常的,我现在那个是用的框架的,也就是说不是采用这个日志中的效果了
Johnny.He Homepage
2007.09.19 10:52
已经用上了 真好~~!
lee Homepage
2007.08.22 22:21
grin有油有菜
lee Homepage
2007.08.22 10:25
grin越来越油菜了
simear2004 回复于 2007.08.22 11:57
是有油没菜啊shy
迷恋罪恶
2007.08.21 16:48
嗯~等到了!
这个东西很好哦!
不过我的FLV播放器在IE下竟然没用!~
真是晕..
分页: 1/1 第一页 1 最后页
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
  您也可用OpenID登入
开启/隐藏 高级扩展