博主送福利了，微信扫码有惊喜。超值红包等着你。。么么哒

言归正转

jqzoom是一款基于jQuery的图片方法插件。

使用方法：1.引入jQuery与jqzoom,jqzoom.css

　　　　　2.准备两张一大一小大小相同的图片，小图片放在<img>标签的"src"属性里，给img标签加个<a>标签，<a>标签的"href"属性链向大图片

参数说明：zoomWidht:　　小图片所选区域的宽度。

　　　　　zoomHeight:　  小图片所选区域的高度。

　　　　　zoomType:　　 默认值为standard。如果设为reverse，在小图片仲，移入鼠标时，所选区域高亮，非选中区域淡灰色。

　　　　　xOffset:　　　　放大后的图片与小图片间的X(横坐标)距离。

　　　　　yOffset:　　　　放大后的图片与小图片间的Y(纵坐标)距离。

　　　　　position:　　　  放大后的图片相对原图片的位置，默认为"right",还可设置为"left","top","bottom"。

　　　　　lens:　　　　　　布尔值，表示是否显示小图片中的选中区域，默认值为"true",如果设为"false"，则放大后的图片上面不会出现主题字样。

　　　　　imageOpacity:　当zoomType的值为"reverse"时，用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。

　　　　　preloadImages：布尔值，表示是否重新加载大图像。

　　　　　preloadText：　 重新加载大图像时，小图像显示的文本说明。

　　　　   title：　　　　　 大图像顶部是否显示<a>标签里的title。

　　　　　showEffect:　　 大图像加载时的特效，可选值:"show"表示直接显示，"fadein"由透明度渐变载入效果。

　　　　　hideEffect：　　 大图像隐藏特效，可选值："hide"表示直接隐藏，"fadeout"透明度渐变隐藏。　　

　　　　　fadeinSpeed:　　当大图像的载入特效设为"fadein"时，此属性可设置特效的时间，可选值为'fast','slow',number分别代表，快慢，毫秒数。

　　　　　fadtoutSpeed:　 当大图像的隐藏特效设为"fadeout"时，此属性可设置特效载的时间，可选值为'fast','slow',number分别代表，快慢，毫秒数。

//html代码

<body>

    <div style="margin-left:500px;">

        <a id="img1" href="/1big.jpg" title="我的星星" ><img src="/1small.jpg" alt="" /></a>

    </div>

</body>

//js代码

<script src="jQuery.1.8.3.js" type="text/javascript"></script>

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

    <link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(function () {

            $('#img1').jqzoom({

                zoomWidth:200,

                zoomHeight:200,

                position:"bottom",

　　　　　　　　　 yOffset:50,

                lens:true,

                imageOpacity:1.0

            });

        })

    </script>

jQuery插件之jqzoom的使用和参数设置的更多相关文章

  1. jQuery插件之jqzoom

    jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...

  2. jQuery插件开发方式

    一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){ $.extend({ fun1: ...

  3. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  4. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  5. 助你简化开发的 jQuery 插件

    Vanity Toolset vanity toolset是一套方便的UI工具集,可以帮助你快速的搭建幻灯,聚光灯,占位,收放相关的UI,它完成了大部分的UI功能,你只需要花费很少时间就可以构建一个完 ...

  6. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  7. 写jQuery插件时，一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  8. jQuery插件select2跨域设置xhrFields参数

    ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...

  9. jquery插件cloud-zoom(放大镜)

    效果预览:http://www.helloweba.com/demo/cloud-zoom/ 源代码下载:http://pan.baidu.com/s/1eQnadXo Cloud Zoom是一个图像 ...

随机推荐

  1. BNUOJ 7178 病毒侵袭持续中

    病毒侵袭持续中 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 30 ...

  2. Uva - 11181 Probability|Given (条件概率)

    设事件B为一共有r个人买了东西,设事件Ai为第i个人买了东西. 那么这个题目实际上就是求P(Ai|B),而P(Ai|B)=P(AiB)/P(B),其中P(AiB)表示事件Ai与事件B同时发生的概率,同 ...

  3. 记一次springMVC的跨域解决方案

    日期:2019年5月18日 事情原因:由于微信小程序的开发只有测试环境,而后台提供借口的环境是开发环境:两个环境的域名不同,导致前端开发产生了跨域问题: 理论概念: 1.同源策略:同源策略是浏览器的安 ...

  4. 安卓常见错误Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.

    Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace. 导入新的 ...

  5. list循环删除单个元素

    摘自https://www.cnblogs.com/pcheng/p/5336903.html JAVA中循环删除list中元素的方法总结 JAVA中循环遍历list有三种方式for循环.增强for循 ...

  6. Ubuntu 16.04粘贴板增强工具Diodon

    相比Parcellite(http://www.cnblogs.com/EasonJim/p/7119308.html),Diodon可以支持图片. 安装: sudo add-apt-reposito ...

  7. epoll 的accept , read, write

    http://www.ccvita.com/515.html 在一个非阻塞(fcntl)的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就 ...

  8. 【c++】【转】c++中的explicit关键字

    http://www.cnblogs.com/chio/archive/2007/09/17/895263.html c++中的explicit关键字用来修饰类的构造函数,表明该构造函数是显式(调用) ...

  9. VM虚拟机的网卡模式介绍

    (1)Bridged方式 用这种方式,虚拟系统的IP可设置成与本机系统在同一网段,虚拟系统相当于网络内的一台.独立的机器,与本机共同插在一个Hub上,网络内其他机器可访问虚拟系统,虚拟系统也可访问网络 ...

  10. Python3标准库（二） re模块

    正则表达式(Regular Expression)是字符串处理的常用工具,通常被用来检索.替换那些符合某个模式(Pattern)的文本.很多程序设计语言都支持正则表达式,像Perl.Java.C/C+ ...