Highslide JS 是一个开源的Javascript 软件,它提供以Web 2.0 方式弹出窗口的效果。它简化了在网页上弹出缩略图和HTML 代码片断的做法,不存在被浏览器拦截的问题,也无需使用任何插件。弹出的内容在当前浏览器窗口中,用户还可以在保留当前弹出内容的情况下继续滚动网页而不需要关闭它。具有良好的兼容性和可访问性,当用户禁用了Javascript 或是在Javascrip 失效的情况下,浏览器会重定向到图片本身或事先指定的HTML页。
官网: http://highslide.com/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="highslide/highslide.js"></script>
</head>
<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 5px solid white;
border-top: none;
padding: 5px;
background-color: white;
}
.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;
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: 10px;
}
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;
}
/* These must always be last */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
<div>
<a href="2.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="2.jpg" height="100" width="100" /></a>
<div class='highslide-caption' id='caption1'>
This caption can be styled using CSS.
</div>
</div>
</body>
</html>
分享到:
相关推荐
highslide-gallery图片查看器
Highcharts-Highslide Highcharts-Highslide Highcharts-Highslide
highslide-4.0.8&BasicDemo.rar 文件说明: Highslide简单演示 最简版的Highslide Demo 暂时就会这么多 慢慢研究 呵呵 highslide-4.0.8.zip 官方最新版本 2008-10-28 highslide: 超好用的开源JS软件,提供类似...
多种highslide显示图片效果 效果多样,哈哈
当我们有一块很大的文本要再textarea中显示,但是又碍于文本块太大,放下之后,影响我们的网站的整体布局。显示一部分却又让部分重要信息得不到展示。这时候,我们就想到了用HighSlider。
使用视觉Highslide编辑器来设置Highslide安装,无需编写代码。 快速而优雅。 不需要像Flash或Java插件。 弹出拦截器没有问题。打开浏览器窗口内活跃的内容。 单击。打开后的图像或HTML弹出,用户可以进一步滚动或离开...
highslide jquery 幻灯片插件(好用)highslide-4.1.7.zip
highslide,超强的网页编程插件,highslide,highslide,highslide,highslide
图片浏览(放大、缩小)效果
ja_highslide用于joomla
highslide-4.1.8,Highslide JS is an open source image, media and gallery viewer written in JavaScript.
highslide弹出可移动层,层中内容可是图片或html内容
highslide-4.1.8图片特效控件 这个是最新版 刚弄到的 知道的就不要介绍了吧 不知道的下了觉不后悔。。
这是一个很漂亮的图片弹出样式,...Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.
图片放大插件highslide(亲测ok含自己总结)有不懂的可以M我
highslide的图片显示效果很棒的,下了绝对不会后悔。 里面就有示例,不要担心你不会用。。。
highslide放大图片展示样例,js,css,jsp页面。highslide放大图片展示样例,js,css,jsp页面。
highslide-gallery
Highslide JS
Additional files for the HighslideAdditional files for the HighslideAdditional files for the Highslide