所属分类:网页特效-图片特效,悬浮层/弹出层
使用方法:
载CSS样式文件
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="dist/zoomify.min.css">
<link rel="stylesheet" href="css/style.css">
HTML部分
<div class="examples">
<div class="row">
<div class="example col-md-12 col-xs-12 ">
<p><img src="img/1.jpg" class="img-rounded" alt="">p>
div>
div>
<div class="row">
<div class="example col-xs-6 col-md-6">
<p><img src="img/2.jpg" class="img-rounded" alt="">p>
div>
<div class="example col-xs-6 col-md-6">
<p><img src="img/3.jpg" class="img-rounded" alt="">p>
div>
div>
<div class="row">
<div class="example col-xs-3 col-md-3">
<p><img src="img/4.jpg" class="img-rounded" alt="">p>
div>
<div class="example col-xs-3 col-md-3">
<p><img src="img/5.jpg" class="img-rounded" alt="">p>
div>
<div class="example col-xs-3 col-md-3">
<p><img src="img/6.jpg" class="img-rounded" alt="">p>
div>
<div class="example col-xs-3 col-md-3">
<p><img src="img/7.jpg" class="img-rounded" alt="">p>
div>
div>
div>
载入jQuery库文件、插件JS文件、插件初始化配置
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">script>
<script src="dist/zoomify.min.js">script>
<script type="text/javascript">
$('.example img').zoomify();
script>
对“.example img”范围内的图片都有效