基于jQuery的图片浏览插件（1）

Fish北冥

已于 2025-01-02 11:35:14 修改

阅读量411

点赞数 5

分类专栏： jQuery 文章标签： jquery 前端 javascript

于 2025-01-02 11:27:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42400124/article/details/144881075

版权

jQuery 专栏收录该内容

17 篇文章

订阅专栏

基于jQuery的图片浏览插件

可滚动放大缩小；全屏查看；旋转；翻转；切换，自动切换

基于jQuery的图片浏览插件

在这里插入图片描述

代码块：

viewer插件

<div class="gallery gallery-icont" id="gallery">
	<a href="javascript:;" class="item">
		<img src="img/img01.jpg" />
		<div class="textbox">
			<div>
				<h3>《千与千寻》</h3>
				<h4>不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。</h4>
			</div>
		</div>
	</a>
	<a href="javascript:;" class="item">
		<img src="img/img02.jpg" />
		<div class="textbox">
			<div>
				<h3>《千与千寻》</h3>
				<h4>因为遇见你，我才知道我也能具有美丽的记忆。所以，无论你怎样对待我，我都会用心去宽恕你的恨，用心去铭记你的好。</h4>
			</div>
		</div>
	</a>
</div>
<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>
<script type="text/javascript">
	/*查看大图*/
	var image = new Viewer(document.getElementById('gallery'), {
	    button: true,
	    navbar: false,
	    width: 660,
	    title: false
	});
</script>

css样式

/* gallery */
.gallery{position: relative;margin: auto;z-index: 1;display: flex;display: -webkit-flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.gallery .item{display: block;width: 32%;margin-right: 2%;margin-bottom: 2%;overflow: hidden;position: relative;}
.gallery .item:nth-of-type(3n){margin-right: 0;}
.gallery .item img{display: block;width: 100%;transition: all .6s;transform: scale(1.1);-webkit-transform: scale(1.1);}
.gallery .item:hover img{transform: scale(1);-webkit-transform: scale(1);opacity: 0.6;}
.gallery .item .textbox{width: 80%;height: 80%;position: absolute;top: 10%;left: 10%;box-sizing: border-box;background-color: rgba(0,0,0,0.5);border: 2px solid #FFFFFF;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;padding: 0 30px;text-align: center;transform: scale(1.5);-webkit-transform: scale(1.5);transition: all .4s ease-in-out;opacity: 0;pointer-events: none;}
.gallery .item .textbox h3{font-size: 20px;color: #FFFFFF;}
.gallery .item .textbox h4{font-size: 14px;line-height: 26px;color: #FFFFFF;margin-top: 20px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;opacity: 0.75;}
.gallery .item:hover .textbox{transform: scale(1);-webkit-transform: scale(1);opacity: 1;}