jQuery插件之jqzoom放大镜插件

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

原创最新推荐文章于 2025-06-25 13:28:42 发布 · 4.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #动画 #淘宝网 #jquery插件

web前端（慕课网教程操作+笔记）专栏收录该内容

35 篇文章

订阅专栏

该博客介绍如何利用jQuery插件jqzoom创建淘宝网常见的放大镜效果。通过在<a>标签中放置小图并链接大图，然后应用jqzoom，设定选区大小，可以实现图片放大功能。此外，还可以结合提供的CSS库调整选中或非选中状态的视觉效果。

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

这个在淘宝上处处可见了，需要两张图片，一张大的一张小的，在<a>标签显示小图片，链接大图片，再给其添加一个jqzoom调用，设置其选中区域的长和宽。

还可以引用其css库，设置其选中或非选中部分变灰。

这里也是慕课网提供的一个css和一个js库

</pre></p><p><pre class="html" name="code"><pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqzoom</title>
  <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
    </head>
    
    <body>
    <div class="content">
                <a href="big.jpg" id="jqzoomIMG" title="丘比龙">
        	         <img src="small.jpg" alt=""/>
                </a>
    </div>
  
        <script type="text/javascript">
            $(function () {
               $("#jqzoomIMG").jqzoom({ //绑定图片放大插件jqzoom
                    zoomWidth:200, //小图片所选区域的宽
                    zoomHeight: 200, //小图片所选区域的高
                    zoomType: 'reverse' //设置放大镜的类型，默认standard即选中的部分变灰，这里是reverse即非选中变灰
                });
            });
        </script>
    </body>
</html>