鼠标图片放大插件-JQUERY ZOOM

 查看演示  website  立即下载

jQuery Zoom是一款可以让我们将鼠标移动到图片上或者点击图片移动放大的插件。

使用步骤

1、首先将以下js和css文件引用到页面中

<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="zoom.css">
<!-- Js Files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zoom.js"></script>

2、在head标签中加入以下js代码

<script type="text/javascript">
        $(document).ready(function() {
                /* simple call */
                $('#ex1').zoom();
                $('#ex2').zoom({ on:'grab' });
                $('#ex3').zoom({ on:'click' });
  
                /* With callback function. EX. colorbox plugin ! */
                $('a.photo').zoom({
                  url: 'photo-big.jpg',
                  callback: function(){
                    $(this).colorbox({href: this.src});
                  }
                });
        });
</script>

3、在body标签中加入以下格式的html代码

<span class="zoom" id="ex1"> <img src="daisy.jpg" id="jack" width="555"height="320" alt="Daisy on the Ohoopee">
<p>
    Hover
</p>
</span> <span class="zoom" id="ex2"> <img src="roxy.jpg" width="290"height="320" alt="Roxy on the Ohoopee">
<p>
    Grab
</p>
</span> <span class="zoom" id="ex3"> <img src="daisy.jpg" width="555"height="320" alt="Daisy on the Ohoopee">
<p>
    Click
</p>
</span>

参数配置

参数名 参数说明 可选值 默认值
url 大图的URL地址，如果不提供该参数，那么将使用第一额IMG元素的src 字符串 false
on 引发放大事件的鼠标动作 mouseover, grab, 或 click mouseover
icon 如果设为true，会在图片右上角添加一个提示 布尔值 true
duration 大图渐隐或渐显的速度 数字 120
callback 图片加载完成的回调函数 函数 false
参数解析
icon:true（默认值）右上角有一个小小的放大镜提示图片

icon:false

三种放大模式：mouseover, grab, 或 click
mouseover：就是当鼠标移动到图片上时放大
grab：是按下鼠标呈手型并放大图片

click：是点击鼠标后开始放大图片，再点击一次又恢复到不能放大的状态

PREVIOUS:
NEXT:
又一款幻灯片插件-FLEXSLIDER
漂亮的分页插件-JPAGINATE