jquery图片列表展开收缩特效代码下载


jquery图片列表展开收缩特效代码下载
jquery图片列表展开收缩特效代码下载以及图片列表、展开收缩等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div class="kePublic">
	<!--图库弹出层 开始-->
	<div class="mskeLayBg"></div>
	<div class="mskelayBox">
		<div class="mske_html"></div>
		<img class="mskeClaose" src="images/mke_close.png" width="27" height="27" />
	</div><!--图库弹出层 结束-->
	<div class="msKeimgBox">
		<ul>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg1.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg1.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
			<li>
				<img src="images/skeImg2.jpg" width="185" height="93" />
				<span class="hidden">
					<img src="images/bkeImg2.jpg" width="974" height="488" />
					<div class="mskeImgBg">
						<img class="mske_downIco" src="images/mke_spng1.png" width="155" height="57" />
						<div class="mske_imgDown"><a class="cor_bs" href="#">1024 x 768</a> <a class="cor_bs" href="#">1280 x 960</a> <a class="cor_bs" href="#">1600 x 1200</a></div>
					</div>
				</span>
			</li>
		</ul>
		<div class="mskeTogBtn"></div>
	</div>
	<!--效果html结束-->
</div>

相关推荐

发表评论

相关文章