背景
我们在浏览购物网站，遇到喜欢的商品，总想点击图片放大后看看详细内容，那么放大是怎么做的呢，写一个简单的例子，带大家了解一下。
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多种形式放大镜</title>
<!--hizoom css样式-->
<link rel="stylesheet" type="text/css" href="../css/hizoom/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/hizoom/htmleaf-demo.css">
<link rel='stylesheet' href='../css/hizoom/main.css'>
<link rel='stylesheet' href='../css/hizoom/hizoom.min.css'>
<!--jquery.zoom css样式-->
<link rel="stylesheet" type="text/css" href="../css/zoom/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/zoom/htmleaf-demo.css">
<style>
/*jquery.zoom必须样式，保证放大后的图片在原位置*/
.zoom{
display:inline-block;
position: relative;
}
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
/*background:url(img/icon.png);*/
}
.zoom img {
display: block;
}
</style>
</head>
<body style="background-color: whitesmoke;text-align: center">
<!--hizoom 展示部分-->
<div style="margin-top: 5%;margin-left: 5%">
<div class='hizoom c2'>
<img src='../images/hizoom/hizoom-cs2.jpg'>
</div>
</div>
<!--jquery.zoom 展示部分-->
<div>
<div style="width: 900px;margin-left: 30%;margin-top: -350px">
<span class='zoom' id='zoom-ex1'>
<img src='/images/zoom/zoom-horse.jpg' width='400' height='320' alt='horse'/>
</span>
<span class='zoom' id='zoom-ex2'>
<img src='/images/zoom/zoom-nvpu.jpg' width='400' height='320' alt='nvpu'/>
</span>
<span class='zoom' id='zoom-ex3'>
<img src='/images/zoom/zoom-cat.jpg' width='400' height='320' alt='cat'/>
</span>
<span class='zoom' id='zoom-ex4'>
<img src='/images/zoom/zoom-shanhe.jpg' width='400' height='320' alt='shanhe'/>
</span>
</div>
</div>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='../js/hizoom/hizoom.min.js' type="text/javascript"></script>
<script src='../js/zoom/jquery.zoom.min.js'></script>
<script type="text/javascript">
/*hizoom插件*/
$('.c2').hiZoom({
width: 300,//放大镜容器的宽高（目前只支持正方形放大镜），会同时修改原始图片的展示大小
position: 'bottom',//被放大区域展示的位置
distance:10,//被放大区域和放大镜容器间的距离
background:'white',//放大镜背景色
opacity:0.7//放大镜透明度 0~1
});
/*jquery.zoom插件*/
$(function (){
$('#zoom-ex1').zoom();//鼠标移动上去即可放大
$('#zoom-ex2').zoom({ on:'grab' });//鼠标点击后不放手，移动鼠标
$('#zoom-ex3').zoom({ on:'click', duration:100});//鼠标点击后放手，可以移动，在点击恢复原状态
$('#zoom-ex4').zoom({ on:'toggle' });//点击指定位置放大
})
</script>
</body>
</html>hizoom放大镜插件的可用配置参数如下：
属性 | 描述 | 可选值 | 默认值 |
width | 放大镜容器的宽高 | 任何正数 | 400 |
position | 被放大区域的位置 | left|right|top|bottom | right |
background | 放大镜背景色 | 合法CSS颜色值 | #FFF |
opacity | 放大镜透明度 | 0~1（合法CSS值） | 0.7 |
distance | 被放大区域和放大镜容器间的距离 | 任何正数 | 20 |
jquery.zoom.js插件的可用配置参数有：
参数 | 默认值 | 描述 |
url | false | 显示大图的url地址。如果没有提供，默认使用第一个img子元素的url地址。 |
on | 'mouseover' | 触发图片放大的事件。可用类型有：mouseover, grab, click, toggle。 |
duration | 120 | 淡入淡出效果的持续时间。 |
target | false | 要放大图片的父容器的选择器或DOM元素。 |
touch | true | 是否允许移动触摸交互。 |
magnify | 1 | 1表示图片放大为原尺寸的2倍。 |
callback | false | 图片加载时的回调函数。 |
onZoomIn | false | 图片放大时的回调函数。 |
onZoomOut | false | 图片缩小时的回调函数。 |
你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。
本文暂时没有评论，来添加一个吧(●'◡'●)