`
corejava2008
  • 浏览: 296621 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

highslide使用入门

阅读更多
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插件的使用

    标题中的"Highslide插件的使用"指的是如何在网页中应用Highslide JS来实现这种功能。描述中提到的情况是,当textarea内的文本过多,单纯展示会影响页面整体结构,而Highslide正好可以作为解决方案,以弹出窗口的形式...

    highslide

    通过压缩包中的"highslide"文件,你可以找到HighSlide 的源代码、示例文件、文档和可能的配置选项,这些都对理解和使用HighSlide 非常有帮助。开发者可以根据自己的需求,对这些资源进行深入研究和定制,打造出满足...

    highslide-gallery图片查看器

    4. **键盘导航**:Highslide支持使用键盘快捷键进行图片间的切换,增强用户操作的便利性。 5. **图片集支持**:对于一组相关的图片,Highslide可以创建一个图片集,用户可以通过左右箭头或导航面板在图片之间自由...

    highslide图片放大效果

    Highslide是一款广泛应用于网页中的JavaScript图片弹出和缩放插件,它提供了丰富的图片展示效果,使得用户体验更加优质。在网页设计中,高质量的图片展示是吸引用户注意力的关键因素之一,而Highslide正好满足了这一...

    highslide jquery 幻灯片插件(好用)

    Highslide JS是一款功能强大且易于使用的JavaScript幻灯片插件,它与jQuery库结合使用,为网站添加高质量的图片和媒体展示效果。Highslide JS以其轻量级、响应式和高度可定制的特点受到广大Web开发者的青睐。在...

    Highcharts-Highslide.rar

    将Highcharts与Highslide结合使用,可以在网页中创建动态的、交互式的图表,并通过Highslide弹出窗口进行详细查看。例如,当用户点击Highcharts中的一个数据点时,可以弹出一个Highslide窗口显示该数据的详细信息或...

    highslide-4.0.8最新版&Basic Demo[2008-10-28]

    highslide-4.0.8&BasicDemo.rar 文件说明: Highslide简单演示 最简版的Highslide Demo 暂时就会这么多 慢慢研究 呵呵 highslide-4.0.8.zip 官方最新版本 2008-10-28 highslide: 超好用的开源JS软件,提供类似...

    highslide可拖动的浮动层效果

    在实际应用中,Highslide的使用步骤通常包括以下几个方面: 1. **引入库文件**:在网页中添加Highslide的JavaScript和CSS文件,这些文件可以从提供的压缩包“highslide-4.1.13_veryhuo.com”中获取。确保正确引用库...

    highslide丰富的页面前端编程,

    4. **样式定制**:HighSlide使用CSS来控制外观,开发者可以通过修改或添加样式来实现自定义设计,如改变边框、阴影、按钮样式等。 5. **与其他库的集成**:HighSlide可以与jQuery、MooTools等JavaScript库配合使用...

    highslide-4.1.8图片特效控件

    9. **多语言支持**:为了满足全球用户的需求,Highslide JS提供多语言支持,方便不同地区的用户使用。 10. **API接口**:Highslide JS提供了丰富的API接口,允许开发者自定义各种功能和事件,如开启、关闭、改变...

    highslide-4.1.13 Dome

    使用视觉Highslide编辑器来设置Highslide安装,无需编写代码。 快速而优雅。 不需要像Flash或Java插件。 弹出拦截器没有问题。打开浏览器窗口内活跃的内容。 单击。打开后的图像或HTML弹出,用户可以进一步滚动或离开...

    highslide-4.1.9(含例子,很酷的)

    这个"highslide-4.1.9"版本包含了该库的一个实例,为用户提供了一个直观的学习和应用平台,无需担心如何开始使用。下面将详细介绍Highslide的核心特性、使用方法以及在实际项目中的应用。 首先,Highslide 的主要...

    ja_highslide

    ja_highslide用于joomla

    highslide-4.1.8

    highslide-4.1.8,Highslide JS is an open source image, media and gallery viewer written in JavaScript.

    highslide图片文字各种效果

    - documentation/:详细的使用文档,帮助开发者了解如何集成和配置HighSlide。 为了在网站上使用HighSlide,你需要将这些文件引用到HTML中,然后通过JavaScript调用来激活HighSlide的功能。例如,你可以为每个需要...

    HighSlide JS

    这是一个很漂亮的图片弹出样式,...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放大图片展示

    HighSlide 是一个流行的JavaScript图像和媒体展示库,它允许用户在网页上实现优雅的图片放大效果,同时提供了丰富的自定义选项和功能。这个压缩包文件包含的资源可能用于创建一个HighSlide图片展示示例,包括...

    highslide-gallery

    此外,可能还会有其他辅助脚本,如"highslide.config.js"用于配置Highslide的行为,或者"highslide.packed.js",这是一个压缩并合并了所有依赖的版本,适合生产环境使用。 "examples"目录提供了各种使用Highslide ...

    图片放大插件highslide(亲测ok含自己总结)

    图片放大插件highslide(亲测ok含自己总结)有不懂的可以M我

    highslide-4.1.9漂亮的图表制作

    总的来说,"highslide-4.1.9漂亮的图表制作"是一个关于如何使用Highslide库高效、美观地呈现数据的教程。通过学习提供的文件和示例,开发者可以快速掌握创建各种图表的技巧,从而提升网站或应用的用户体验。

Global site tag (gtag.js) - Google Analytics