`
落地窗
  • 浏览: 429821 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQZoom 使用说明

 
阅读更多
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
    });
});
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics