jqzoom 放大镜入门

最新推荐文章于 2025-06-25 13:28:42 发布

weixin_30912051

最新推荐文章于 2025-06-25 13:28:42 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154451.html

本文介绍如何使用jqZoom插件实现网页中图片放大的效果。主要步骤包括引入必要的CSS和JS文件、设置图片容器及属性、配置插件参数等。通过示例代码展示了如何具体实施这些步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考地址：http://www.mind-projects.it/blog/jqzoom_v10

1) 在页面中引入jqzoom.css 文件
<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2) 在页面中引入jQzoom.js 和 jQuery.js 文件
<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3) 为图片创建一个容器，并给容器添加 jqzoom 属性，为每一个图片指定一个jqimg 属性，用来指向大图片的路径
<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4) 页面加载
$(document).ready(function(){
     $(".jqzoom").jqueryzoom();
     });
你也可以指定一些参数
$(document).ready(function(){
         $(".jqzoom").jqueryzoom({

       xzoom: 300,   //zooming div default width(default width value is 200)
       yzoom: 300,   //zooming div default width(default height value is 200)
       offset: 40,   //zooming div default offset(default offset value is 10)
       position: "right", //zooming div position(default position value is "right")
                                                preload: 1    , // preload of images :1 by default
       lens:1    // lens over the image   1 by default
      });
     });

EG：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>http://www.mind-projects.it/blog/jqzoom_v10</title>
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.jqzoom.min.js"></script>

    <script language="javascript" type="text/javascript">
     $(document).ready(function(){
        $(".jqzoom").jqueryzoom({
            xzoom: 300,
            yzoom: 300,
            offset: 10,
            position: "right",
             preload:1,
            lens:1
           });
        });
    </script>

    <link href="css/jqzoom.css" type="text/css" rel="stylesheet" />
    <link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
   <div id="wrapper" >
<div id="maincontent">

<div style="float:left;width:100%;clear:both;" >
<div style='float:left;width:100%;'>

<div class="jqzoom" style='margin-right:5px;float:left;'>
<img src="images/shoe2_small.jpg" alt="scarpa" jqimg="images/shoe2_big.jpg">
</div>
</div>