`
落地窗
  • 浏览: 438196 次
  • 性别: 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
    });
});
分享到:
评论

相关推荐

    jqzoom使用方法和例子,附带使用说明和心得

    之前为了做一个放大效果,下载了jqzoom的一个例子来看,自己改良和修改了其中...现在把自己用过的2个例子放出来,加上自己遇到的一些重点和难点予以说明,希望能帮到其他需要使用的人,我QQ273499909,不懂可以M我。

    jqZoom放大镜,淘宝放大镜,jqZoom.js

    提供的“jqzoom图片放大器代码”和“jqzoom使用方法和例子”文件应该包含了实际的代码示例和说明,可以帮助你快速理解和应用这个插件。 在实际项目中,你可能需要考虑以下几点: - 性能优化:由于放大镜效果涉及到...

    JQlightBox+JQZoom for Zen Cart

    结合使用JQlightBox和JQZoom,商家可以在Zen Cart店铺中创建一个既美观又实用的商品图片展示区。AJAX DEMO.png和IH2 DEMO.png可能是这两个插件与其他AJAX技术结合的示例,展示了如何通过动态加载和交互来优化用户...

    zencart 图片放大插件集成版 JQLightBox+JQZoom

    在安装此插件的过程中,用户可以参考提供的 "说明帮助.txt" 文件,该文件通常包含了详细的步骤指导和注意事项。"IH2 DEMO.png"、"JQLightBox DEMO.png"、"JQZoom DEMO.png" 这些图片示例文件展示了插件实际运行的...

    js特效脚本含源码和说明jqzoom图片放大器代码

    js特效脚本含源码和说明jqzoom图片放大器代码本资源系百度网盘分享地址

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    具体来说,文章首先说明了jquery.jqzoom.js的基本功能和使用场景。接着,通过代码示例,指导开发者如何在网页中引入这个插件,并通过调用$.fn.jqueryzoom()函数实现图片的放大镜效果。代码中展示了如何通过配置参数...

    仿京东商品图片放大镜效果jqzoom_v1.1.rar

    "jqzoom_v1.1"就是模仿这种效果的JavaScript解决方案,它使用了流行的jQuery库,提供了简单易用的API和灵活的自定义选项。 【详细说明】 1. **jQuery库**:jqzoom_v1.1依赖于jQuery,这是一个轻量级、高性能的...

    基于jQuery插件jqzoom实现的图片放大镜效果示例

    更多API使用说明可以参考jqzoom的官方文档。 总的来说,jqzoom插件通过简单的配置和HTML结构,可以轻松地在网页上实现图片放大镜效果,提高用户的交互体验,尤其适用于电商网站的产品展示。理解并熟练运用上述知识...

    jQuery放大镜

    9. `51Aspx源码必读 .txt`:这可能是一个阅读指南或使用说明,为用户提供如何理解和使用这个源码包的指导。 综上所述,这个项目是一个结合了前端jQuery技术和后端C#编程的Web应用程序,主要功能是实现一个图像放大...

    jQuery放大镜效果

    最后,`说明read me.txt`可能包含了关于如何使用这个插件、配置选项、兼容性等信息。阅读此文件可以帮助开发者更好地理解和集成这个放大镜效果到他们的项目中。 总的来说,jQuery放大镜效果的实现涉及到jQuery库、...

    jQuery权威指南-源代码

    7.8 图片放大镜插件jqzoom /222 7.9 自定义jQuery插件/224 7.9.1 插件的种类/225 7.9.2 插件开发要点/225 7.9.3 开发插件示例/226 7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求...

    jQuery权威指南366页完整版pdf和源码打包

    5.3.2 fadeto()方法 5.4 自定义动画 5.4.1 简单的动画 5.4.2 移动位置的动画 5.4.3 队列中的动画 5.4.4 动画停止和延时 5.5 动画效果综述 5.5.1 各种动画方法说明 5.5.2 使用animate()方法代替...

    jquery常用插件合集

    本合集包含了多个常用的jQuery插件,它们为Web开发提供了许多实用的功能,以下是各插件的详细说明:** 1. **jQuery Validate 插件(jquery.validate_15.zip)**:这是一个强大的表单验证插件,能够帮助开发者轻松...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...

    jquery图片放大功能简单实现

    以下是详细的知识点说明: 1. **图片放大功能的应用场景**: 图片放大功能常见于在线商城商品详情页面,主要用于展示商品的细节部分。当用户把鼠标悬停在图片上或点击某个区域时,可以弹出一个大图窗口显示更清晰的...

    100多个JQuery效果示例(实例)div+css+javascrpit

    89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...

    jquery 动态示例

    89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog代码 13.带关闭按钮jquery+div消息弹出层代码例子 14.推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery...

Global site tag (gtag.js) - Google Analytics