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. 10 个让人惊讶的 jQuery 插件

    说是让人惊讶,你可能会觉得我们没见过世面,但这里提及的一些 jQuery 的插件的确平时比较少见,用的人应该更少. Grid portfolio 使用竖排方式显示条目信息,现在很流行的的内容布局方式. ...

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

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

  4. jquery 插件大全

    1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...

  5. 16个非常酷的jQuery插件

    摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目.借助他们可以使你的网站更加绚丽多彩. Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片, ...

  6. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  7. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  8. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  9. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

随机推荐

  1. KEIL 程序定位

    用Keil做51的开发也4年多了,代码量基本上维持在5~10K左右,说大不大,说小也不小,也就是个中等货色.这段期间工作上难得有稍许的空间,潜心研究了一下keil中如何在 CODE中定位C程序的方法. ...

  2. Linux下编译第三方库的问题

    因为各个Linux发行版之间的差异还是挺大的,有一些预安装在系统上的基本库是不一样的(不仅仅是版本,有一些是有和无的区别). 那么问题来了: 编译第三方库./configure的时候一般我们不会定制那 ...

  3. c++ 10

    一.二叉树 1.基本特征 1)树型结构的最简模型,每个节点最多有两个子节点--左子节点和右子节点. 2)单根性,每个子节点有且仅有一个父节点,整棵树有且仅有一个根节点. 3)递归性,以任何一个节点为根 ...

  4. Ubuntu 16.04 LTS 正式发布：系统将持续更新5年

    Canonical 刚刚正式发布了Ubuntu 16.04 LTS (Xenial Xerus),这是一个长期支持版本,官方会提供长达5年的技术支持(包括常规更新/Bug修复/安全升级),一直到202 ...

  5. Paint House 解答

    Question There are a row of n houses, each house can be painted with one of the three colors: red, b ...

  6. 《Algorithms 4th Edition》读书笔记——2.4 优先队列(priority queue)-Ⅶ（延伸：堆排序的实现）

    2.4.5 堆排序 我们可以把任意优先队列变成一种排序方法.将所有元素插入一个查找最小元素的有限队列,然后再重复调用删除最小元素的操作来将他们按顺序删去.用无序数组实现的优先队列这么做相当于进行一次插 ...

  7. VMware+Ubuntu8.10+Skyeye+gdb实现u-boot源码调试

    系统平台:WindowsXP 虚拟机: VMware Workstation 6.5.0 Ubuntu8.10 安装程序 ubuntu-8.10-desktop-i386.iso 下载地址:http: ...

  8. poj 3669 Meteor Shower（bfs）

    Description Bessie hears that an extraordinary meteor shower is coming; reports say that these meteo ...

  9. SICP 习题 (1.9) 解题总结

    SICP 习题 1.9 开始针对“迭代计算过程”和“递归计算过程”,有关迭代计算过程和递归计算过程的内容在书中的1.2.1节有详细讨论,要完成习题1.9,必须完全吃透1.2.1节的内容,不然的话,即使 ...

  10. SQLLoader3(数据文件没有分隔符时的导入)

    数据文件:D:\oracletest\ldr_tab_fiile.dat1.数据文件字段中间以制表符TAB隔开:7369 SMITH CLERK7499 ALLEN SALESMAN7521 WARD ...