利用jqueryzoom实现图片放大镜效果

最新推荐文章于 2015-02-02 13:12:19 发布

原创最新推荐文章于 2015-02-02 13:12:19 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #JavaScript #ViewUI

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用jQZoom插件实现网页中图片的缩放效果，包括引入必要的CSS和JS文件、设置图片容器及属性、加载插件等步骤。

在你的页面中包含 jqzoom.css

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

包含 jQzoom 和 jQuery JS 代码：

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

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

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

当页面导入的时候，载入 jQZoom 插件。在head之前写入下面JS

$(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
    });
});

这个jquery.js,jquery.jqzoom.js可以在网上下，到处都是。这里就不附件了。