highslide使用入门

最新推荐文章于 2018-04-08 10:43:18 发布

原创最新推荐文章于 2018-04-08 10:43:18 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #浏览器 #CSS #XHTML #HTML #ViewUI

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

HighslideJS是一款开源的JavaScript库，可以轻松实现网页上的缩略图和HTML片段弹出效果，无需插件支持且具备良好的浏览器兼容性。在不启用JavaScript的情况下，HighslideJS能确保页面正常访问。

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>