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. 液晶顯示器 LCD (Liquid Crystal Disply )

    常見的液晶顯示器按物理結構分為四種: (1)扭曲向列型(TN-Twisted Nematic): (2)超扭曲向列型(STN-Super TN): (3)雙層超扭曲向列型(DSTN-Dual Scan ...

  2. RedHat9通过Host-only配置网络连接

    首先我用的是VMware8版本安装的RedHat9.VMware给我们提供了三种让虚拟机里的安装系统连上网的方式.分别是Host-only,Bridge,NAT.我要讲的是Host-only. 第一步 ...

  3. Smallest Rectangle Enclosing Black Pixels 解答

    Question An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. ...

  4. iOS opencv

    1.在iPhone上使用 OpenCV http://blog.csdn.net/kmyhy/article/details/7560472 2. OpenCV iOS Hello¶ http://d ...

  5. 第04讲- Android项目目录结构分析

    学习内容: 1.        认识R类(R.java)的作用 R.java是在建立项目时自动生成的,这个文件是只读模式,不能更改.R类中包含很多静态类,且静态类的名字都与res中的一个名字对应,即R ...

  6. 【转】ffserver用法小结

    我们可以通过ffserver以及ffmpeg做一个简单的视频监控系统,ffserver用于视频的转发调度,ffmpeg用于转码 而对于ffserver最基本也是最重要的就是对它的ffserver.co ...

  7. jsp判断session中的值

    方法有两种: 假设,此session的名字叫adminAccount 1.EL表达式 <script type="text/javascript"> if($.trim ...

  8. Lua 基本语法

    学习Unity的ulua热更新插件就必须先学习lua的基本语法. 我们一起来学习Lua吧O(∩_∩)O. 首先搭建Lua运行环境Lua for windows 下载地址: http://www.cr1 ...

  9. POJ 3254 炮兵阵地(状态压缩DP)

    题意:由方格组成的矩阵,每个方格可以放大炮用P表示,不可以放大炮用H表示,求放最多的大炮,大炮与大炮间不会互相攻击.大炮的攻击范围为两个方格. 分析:这次当前行的状态不仅和上一行有关,还和上上行有关, ...

  10. UISwitch + UIimage - 初识IOS

    这里解释一个小例子,希望对你有点帮助,利用UISwitch控制UIimage的动画效果 先定义一个数组,用来存放照片,现在定义数组有一个特别简单的方法: NSArray *image1 = @[]; ...