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

来源:https://www.sucaihuo.com/js/864.html 2016-06-02 18:09浏览(5199) 收藏

这是一款仿qq相册显示效果插件,支持鼠标,上下键控制切换大图
jquery点击小图全屏显示大图的相册代码
分类:图片代码 > 图片墙 难易:中级
查看演示 下载资源 下载积分: 20 积分

载入弹出层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;}



小图列表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>
标签: 遮罩层
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2