图片的点击缩放（zoom插件实现）
zoom插件：
页面引入js文件和css文件
<link href="css/zoom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/zooming.js"></script>页面结构：
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ZOOM插件实现图片的点击放大</title>
<link href="css/zoom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/zooming.js"></script>
<style type="text/css">
#container {
margin: 0 auto;
}
.content {
max-width: 660px;
margin: 0 auto;
}
.content img {
max-width: 100%;
}
@media (max-width: 800px) {
.content {
max-width: 100%;
margin: 20px;
}
}
</style>
</head>
<body>
<div id="container">
<section class="content">
<img src="images/obeas.jpg" alt="暂无图片" title="点击放大" data-action="zoom" style="width: 50vw;height: 50vh">
<img src="images/trim.jpg" alt="暂无图片" title="点击放大" data-action="zoom" style="width: 50vw;height: 50vh">
</section>
</div>
</body>
css文件
body, html { font-size: 100%; padding: 0; margin: 0;}
body{
background: #494A5F;
font-weight: 500;
font-size: 1.05em;
font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;data-action=”zoom”标识在图片中使用这个插件
style=”width: 50vw;height: 50vh”
其中img标签中的style属性的vw和vh表示当前图片相对于当前窗口大小得百分比的宽和高
zoom.js插件的可用配置参数有：
| 参数 | 默认值 | 描述 |
|---|---|---|
| url | false | 显示大图的url地址。如果没有提供，默认使用第一个img子元素的url地址。 |
| on | ‘mouseover’ | 触发图片放大的事件。可用类型有：mouseover, grab, click, toggle。 |
| duration | 120 | 淡入淡出效果的持续时间。 |
| 。。。 | 。。。 | 。。。。 |