z 放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./cloudzoom.css"></script>
<style>
ul,
li {
list-style: none;
}
.container .content {
position: relative;
margin-top: 10px;
}
.container .content .smallImg {
position: relative;
width: 300px;
height: 300px;
}
.container .content .smallImg img {
width: 100%;
height: 100%;
}
.container .imgList ul li {
float: left;
width: 60px;
height: 60px;
margin: 10px;
border: 1px solid transparent;
}
.container .imgList ul li img {
width: 100%;
height: 100%;
}
.container .imgList ul li.current {
border-color: red;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="m content">
<div class="jqueryzoom smallImg">
<img id="img" class="cloudzoom " src="./banner1_choo.jpg"
data-cloudzoom="zoomSizeMode:'image',zoomImage: './banner1_choo.jpg',autoInside: 40" alt=""
title="">
</div>
<div class="imgList">
<ul>
<li>
<img class="cloudzoom-gallery" src="./banner1_choo.jpg"
data-cloudzoom="useZoom:'.cloudzoom',image:'./banner1_choo.jpg',zoomImage:'./banner1_choo.jpg'">
</li>
</ul>
</div>
</div>
</div>
<script src="./jquery-1.11.1.min.js"></script>
<script src="./cloudzoom.js"></script>
<script>
CloudZoom.quickStart();
</script>
</body>
</html>
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
