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. ASP.NET MVC3快速入门——第五节、从控制器访问模型中的数据

    5.1 从控制器访问模型中的数据在本节中,我们将创建一个新的MoviesController类,并且书写代码来获取数据库中的数据,并通过视图模板来显示在浏览器中.鼠标右击Controller文件夹,点 ...

  2. xmind教程

    xmind是什么东西我不多说.作为一个程序员,我通常用来编写一个文档.比如某个模块的设计或者流程图. 一开始我是以word画图的方式来用xmind的,即想要什么图形,就去插入里面找.结果碰了一鼻子灰, ...

  3. qt QSortFilterProxyModel

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.Qt import * from PyQt4. ...

  4. IOS开发之语音合成(科大讯飞)详解

    1.注册讯飞账号,申请APPID(注意选择IOS平台) 2.加载所需要的类库 3.导入所需要的类库文件头 4.调用申请的APPID以及所需函数,完成语音合成(需要参考官方给出的SDK文件)   详细步 ...

  5. iTunes 重新提交代码步骤

    1.选择View Details 2.右侧Links-Binary Details选项 3.Reject This Binary

  6. maven 工作原理和添加jar包技巧

        相 信只要做过 Java 开发的童鞋们,对 Ant 想必都不陌生,我们往往使用 Ant 来构建项目,尤其是涉及到特别繁杂的工作量,一个 build.xml 能够完成编译.测试.打包.部署等很多 ...

  7. mysql 自己定义存储过程和触发器

    mysql 自己定义存储过程和触发器 --存储过程示范 DROP PROCEDURE IF EXISTS PRO_TEST; CREATE PROCEDURE PRO_TEST(IN NUM_IN I ...

  8. gitlab升级方法

    gitlab升级方法:国内网络环境推荐方法二方法一:官网的升级方式 (1)停止git服务 gitlab-ctl stop unicorn gitlab-ctl stop sidekiq gitlab- ...

  9. Swift基础--使用TableViewController自定义列表

    首先建立一个swift项目,把storyboard的内容删掉,添加一个 Navigation Controller,然后设置storyboard对应界面的class,在Navigation Contr ...

  10. 为github帐号添加SSH keys

    为github帐号添加SSH keys 2012-05-26 00:05 34279人阅读 评论(6) 收藏 举报 ssh文本编辑gitvim工具up 使用git clone命令从github上同步g ...