首页 » 开源 » jQuery 图片放大镜效果插件：jQZoom

jQuery 图片放大镜效果插件：jQZoom

Denis 2008年07月12日
文章目录[隐藏]

在一些产品演示网站，常常需要这样的效果，把鼠标移到小图的上面，旁边出现这这部分的放大效果，通过这种方式让用户能够详细了解产品的细节。

jQZoom 就是这样的一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，把鼠标移到小图上，旁边出现大图的局部放大的部分，如下演示：

jQZoom 演示

RSS 用户需要返回页面才能看到效果。

jQZoom 使用说明

下面介绍下简单使用：

1. 在你的页面中包含 jqzoom.css

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2. 包含 jQzoom 和 jQuery JS 代码：

<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3. 现在创建一个放图片的容器（最好是 DIV），并给 class 赋值为 jqzoom，然后给每张图片设置一个 jqimg 属性，它的值为大图的地址。

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4. 当页面导入的时候，载入 jQZoom 插件。

$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });

好了基本设置好了，当然你也可以自己做些简单的设置：

$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //设置放大 DIV 长度（默认为 200）
        yzoom: 300, //设置放大 DIV 高度（默认为 200）
        offset: 10, //设置放大 DIV 偏移（默认为 10）
        position: "right", //设置放大 DIV 的位置（默认为右边）
         preload:1,
        lens:1
    });
});

下载：jQZoom。
演示：jQuery 图片放大镜效果插件：jQZoom

标签：

分享到：

相关日志最热日志最新日志

7 条评论 添加你的评论 →

  • 二手科学家 2008-07-12 20:24:38 #

    好像是沙发？
    有缓冲？

    支持 反对

  • 杨林 2008-07-13 13:04:03 #

    我的意思是嫩可以做一个这个插件,在撰写文章的时候有快捷插入方式.

    这个插件必然火热.

    支持 反对

  • 锦瑟 2008-10-15 16:54:38 #

    不知为什么，照 着做，就是不显示大图片，不知是什么原因，头痛呀，博主遇到过吗？

    支持 反对

  • jay 2008-12-12 11:10:58 #

    为什么不能发表留言？？？？

    支持 反对

    • jay 2008-12-12 11:12:11 #

      晕，可以了，兄弟们，能不能把jQzoom发一份到我的邮箱啊，现在下载不了了。
      bokix@163.com

      支持 反对

  • maomao 2009-03-05 15:30:38 #

    这样就可以了，大家试试 :roll:

    $(document).ready(function(){
    $(“.jqzoom”).jqueryzoom({
    xzoom: 200, //zooming div default width(default width value is 200)
    yzoom: 200, //zooming div default width(default height value is 200)
    offset: 20, //zooming div default offset(default offset value is 10)
    position: “right”, //zooming div position(default position value is “right”)
    preload:1,
    lens:1
    });
    });

    支持1 反对1

发表评论

你必须 登陆 之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼：

使用新浪微博登陆 使用腾讯微博登陆 使用豆瓣登陆

你也可选择直接在本站 注册。