jQuery方格图片放大轮播特效代码下载


jQuery方格图片放大轮播特效代码下载
jQuery方格图片放大轮播特效代码下载以及方格图片、放大轮播等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.gridAccordion.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.gridAccordion.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></title>
</head>
<script type="text/javascript">
$(document).ready(function($){
	$('.accordion').gridAccordion({
		width:1100, 
		height:680, 
		columns:4, 
		distance:2, 
		closedPanelWidth:10, 
		closedPanelHeight:10, 
		alignType:'centerCenter',
		slideshow:true,
		panelProperties:{
			0:{captionWidth:200, captionHeight:35, captionTop:30, captionLeft:30},
			4:{captionWidth:150, captionHeight:100, captionTop:30, captionLeft:650},
			7:{captionWidth:310, captionHeight:35, captionTop:350, captionLeft:40},
			8:{captionWidth:300, captionHeight:40, captionTop:150, captionLeft:35},
			11:{captionWidth:150, captionHeight:120, captionTop:300, captionLeft:30},
			14:{captionWidth:300, captionHeight:40, captionTop:30, captionLeft:50},
			16:{captionWidth:150, captionHeight:120, captionTop:150, captionLeft:10},
			18:{captionWidth:300, captionHeight:40, captionTop:130, captionLeft:50}
		}
	});
});
</script>
<ul class="accordion">
	<li><a><img alt="" src="picture/yyhj01.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj02.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj03.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj04.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj05.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj06.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj07.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj08.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj09.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj10.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj11.jpg"></a></li>
	<li><a><img alt="" src="picture/yyhj12.jpg"></a></li>
</ul>
</html>

相关推荐

发表评论

相关文章