你的分享就是我们的动力 ---﹥

jQuery Zoom鼠标经过图片放大插件

时间:2013-05-14 16:12来源:www.chengxuyuans.com 点击:

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

jQuery Zoom预览图

3

使用步骤

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  id='ex1'>
        <img src='daisy.jpg' id='jack' width='555' height='320' alt='Daisy on the Ohoopee'/>
        <p>Hover</p>
</span>
<span  id='ex2'>
        <img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
        <p>Grab</p>
</span>
<span  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(默认值)右上角有一个小小的放大镜提示图片

2

icon:false

Untitled-1

三种放大模式:mouseover, grab, 或 click

mouseover:就是当鼠标移动到图片上时放大
grab:是按下鼠标呈手型并放大图片
click:是点击鼠标后开始放大图片,再点击一次又恢复到不能放大的状态

jQuery Zoom下载地址

网盘下载:http://pan.baidu.com/share/link?shareid=216447&uk=2166814920

转载注明地址:http://www.chengxuyuans.com/jquery_plugin/jQueryZoom.html