jquery点击小图全屏显示大图的相册代码

收藏

这是一款仿qq相册显示效果插件，支持鼠标，上下键控制切换大图

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

载入弹出层css

/* gallery */
.zoomed > .gallery{-webkit-filter:blur(3px);filter:blur(3px);}
.gallery{width:800px;margin:20px auto;}
.gallery li{float:left;margin:10px; width:80px; height:80px;}
.gallery li:nth-child(6n){padding-right:0;}
.gallery li a,.gallery li img{float:left;}
</style>

<!--图片弹出层样式 必要样式-->
<link rel="stylesheet"  href="css/zoom.css" media="all" />

小图列表html

<div class="gallery">	 
	<ul>
		<li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
		<li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
		<li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
		<li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
		<li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
</ul>
</div>

载入js

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