`
天梯梦
  • 浏览: 13629891 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

非常好用的 Highslide JS ，完全可以代替 lightbox

JavaScriptCSSIEHTML浏览器 
阅读更多

主页：

http://highslide.com/

 

实例：

http://highslide.com/index.htm

 

自定义下载：

http://highslide.com/editor/

 

文档

http://highslide.com/ref/

 

图表

http://www.highcharts.com/demo/

 

Highcharts JS是一个纯JavaScript制图Library，支持的图表类型包括：line、spline、area、areaspline、column、 bar、pie和scatter。当鼠标移到图表上时会利用一个tooltip展示每一点或区域上相关的文本信息。可以放大图表，查看某部分更详细的数 据。Highcharts支持大部分浏览器包括iPhone和IE6。源码及实例

 

 

附上一个小技巧：

 

<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.showCredits = false;
</script>
 

通过设置showCredits 的属性可以控制 gallery左上角是否出现 “powered by highslide js” 的超链接，当然，您也可以直接在highslide.js 文件中直接修改它的值。

 

 

实例：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS - Custom Example</title>

<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'custom';
hs.captionEval = 'this.a.title';
</script>

</head>
<body>
<h3>Single image</h3>
<div style="text-align: justify">

	<a href="highslide/sample-images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"
			
			title="Caption from the anchor's title attribute" style="float:right; margin: 0 0 10px 15px">
		<img src="highslide/sample-images/thumbnail.jpg"  alt=""
			style="width: 107px;height:120px;" />
	</a>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
	fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>

 

 

分享到：
| php 显示ip所属地 （qq版）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics