jquery colorbox弹出层插件制作图片弹出显示代码



155 619 207



特效描述:弹出层插件 图片弹出显示,jquery colorbox弹出大图效果

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lightbox图片展示效果</title>
<script type="text/javascript">
$(document).ready(function(){
	$("a[rel^='colorbox']").colorbox({
		title:" ",
		slideshow:true,
		slideshowAuto:false,
		previous:"上一张",
		next:"下一张",
		close:"关闭",
		slideshowStart:"播放",
		slideshowStop:"暂停",
		current:"第 {current} 张 (共{total}张)"
	});
});
</script>
</head>
<body style="text-align:center">
<div id=iscroll0>
	<ul>
		<li><a href="images/eg1.jpg" rel="colorbox1"><img src="images/eg1.jpg" width="300px" height="300px"></a><span style="display:block">用各种Logo 拼凑出来的</span></li>
		<li><a href="images/eg2.jpg" rel="colorbox1"><img src="images/eg2.jpg" width="300px" height="300px"></a><span style="display:block">怀念乔布斯教主</span><li>
		<li><a href="images/eg3.jpg" rel="colorbox1"><img src="images/eg3.jpg" width="300px" height="300px"></a><span style="display:block">用各种图片拼凑的数字1</span></li>
	</ul>
</div>	
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到