第一步：引入文件
<link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.artZoom.js"></script>
第二步：设计HTML结构 img必须加上artZoom类
<div id="demo" class="text-center">
<a href="images/01.jpg"><img class="artZoom" src="data:images/01m.jpg"/></a>
</div>
第三步：加上css样式，根据自己需求添加
<style type="text/css">
.artZoom {
padding: 3px;
background: #FFF;
border: 1px solid #EBEBEB;
} body {
font-size: 75%;
font-family: '微软雅黑';
padding-bottom: 200px;
} img {
border: 0 none;
} #demo {
width: 540px;
padding: 5px;
background: #FBFCFD;
}
</style>
第四步：加载 artZoom插件
<script type="text/javascript">
jQuery(function ($) {
$('.artZoom').artZoom({
path: './images', // 设置artZoom图片文件夹路径
preload: true, // 设置是否提前缓存视野内的大图片
blur: true, // 设置加载大图是否有模糊变清晰的效果 // 语言设置
left: '左旋转', // 左旋转按钮文字
right: '右旋转', // 右旋转按钮文字
source: '看原图' // 查看原图按钮文字
});
});
</script>
可直接运行代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>artZoom</title>
<link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.artZoom.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.artZoom').artZoom({
path: './images', // 设置artZoom图片文件夹路径
preload: true, // 设置是否提前缓存视野内的大图片
blur: true, // 设置加载大图是否有模糊变清晰的效果 // 语言设置
left: '左旋转', // 左旋转按钮文字
right: '右旋转', // 右旋转按钮文字
source: '看原图' // 查看原图按钮文字
});
});
</script>
<style type="text/css">
.artZoom {
padding: 3px;
background: #FFF;
border: 1px solid #EBEBEB;
} body {
font-size: 75%;
font-family: '微软雅黑';
padding-bottom: 200px;
} img {
border: 0 none;
} #demo {
width: 540px;
padding: 5px;
background: #FBFCFD;
}
</style>
</head>
<body>
<div id="demo" class="text-center">
<a href="images/01.jpg"><img class="artZoom" src="data:images/01m.jpg"/></a>
</div>
</body>
</html>
完！