highslide使用入门

最新推荐文章于 2021-01-14 05:22:39 发布

corejava999

最新推荐文章于 2021-01-14 05:22:39 发布

阅读量367

点赞数

分类专栏： JavaScript 文章标签： JavaScript 浏览器 CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/corejava999/article/details/83814570

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

corejava999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highslide使用入门

Highslide JS 是一个开源的Javascript 软件，它提供以Web 2.0 方式弹出窗口的效果。它简化了在网页上弹出缩略图和HTML 代码片断的做法，不存在被浏览器拦截的问题，也无需使用任何插件。弹出的内容在当前浏览器窗口中，用户还可以在保留当前弹出内容的情况下继续滚动网页而不需要关闭它。具有良好的兼容性和可访问性，当用户禁用了Javascript 或是在Javascrip 失效的情...
复制链接

扫一扫

专栏目录