图片点击放大并可点击旋转插件（1）-jquery.artZoom.js

最新推荐文章于 2022-04-03 07:55:53 发布

weixin_33763244

最新推荐文章于 2022-04-03 07:55:53 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuqingxia/p/6018481.html

本文介绍如何通过artZoom插件实现网页中图片的放大预览效果，包括引入必要的JS和CSS文件、编写HTML结构及配置插件选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先加入链接：

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.artZoom.js"></script>
<link href="css/jquery.artZoom.css" rel="stylesheet" type="text/css">

2.html代码：

<ul class="imgList">
     <li><a href="images/01.jpg"><img class="artZoom" src="images/01m.jpg" /></a></li>
     <li><a href="images/03.jpg"><img class="artZoom" src="images/03m.jpg" /></a></li>
     <li><a href="images/04.jpg"><img class="artZoom" src="images/04m.jpg" /></a></li>
</ul>


3.artzoom调用

jQuery(function ($) {
	$('.artZoom').artZoom({
		path: './images',	// 设置artZoom图片文件夹路径
		preload: true,		// 设置是否提前缓存视野内的大图片
		blur: true,			// 设置加载大图是否有模糊变清晰的效果
		
		// 语言设置
		left: '左旋转',		// 左旋转按钮文字
		right: '右旋转',		// 右旋转按钮文字
		source: '看原图'		// 查看原图按钮文字
	});
});


本篇内容在网上查找整理所得

转载于:https://www.cnblogs.com/liuqingxia/p/6018481.html