jQuery插件之jqzoom
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的更多相关文章
- jQuery插件之jqzoom的使用和参数设置
jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...
- 10 个让人惊讶的 jQuery 插件
说是让人惊讶,你可能会觉得我们没见过世面,但这里提及的一些 jQuery 的插件的确平时比较少见,用的人应该更少. Grid portfolio 使用竖排方式显示条目信息,现在很流行的的内容布局方式. ...
- jquery插件cloud-zoom(放大镜)
效果预览:http://www.helloweba.com/demo/cloud-zoom/ 源代码下载:http://pan.baidu.com/s/1eQnadXo Cloud Zoom是一个图像 ...
- jquery 插件大全
1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...
- 16个非常酷的jQuery插件
摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目.借助他们可以使你的网站更加绚丽多彩. Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片, ...
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
随机推荐
- Powershell变量的类型和强类型
Powershell变量的类型和强类型12 12月, 2011 在 Powershell tagged Powershell教程 / 变量 / 存储 / 数据 / 类型 by Mooser Lee ...
- GestureDetector和SimpleOnGestureListener的使用教程
1. 当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouch(Vi ...
- 使用httpclient抓取时，netstat 发现很多time_wait连接
http://wiki.apache.org/HttpComponents/FrequentlyAskedConnectionManagementQuestions 1. Connections in ...
- SxsTrace工具使用方法
Windows7平台上有一个强大的SxsTrace工具,可以跟踪调试应用程序运行时需要的动态库的版本和路径. SxsTrace使用的方法: 1.首先必须以Administrator用户身份登录 ...
- Linux 挂载光驱
Linux的硬件设备都在/dev目录下,/dev/cdrom表示光驱,挂载方法如下: 1.挂载光驱 [root@oracle ~]# mount -t iso9660 /dev/cdrom /mnt/ ...
- 四种简单的排序算法的php实现
无聊,用php写几个排序算法,算法介绍请移步这里,这里使用php实现了几个简单的,如下 //选择排序 function selection_sort($arr){ $len = count($arr) ...
- 高仿qq聊天界面
高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...
- FZU 2102 Solve equation（水，进制转化）&& FZU 2111（贪心，交换使数字最小）
C Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Pra ...
- 2013年全球ERP市场格局（Gartner）
Gartner于5月5日公布了全球ERP市场的分析报告,报告称全球ERP软件销售额2013年整体增长了3.8%(从2012年$244亿美元到2013年$258亿美元),全球前五位ERP厂商座次例如以下 ...
- Android应用切换皮肤功能实现(二)
原文地址http://www.apkbus.com/forum.php?mod=viewthread&tid=149034&highlight=%E7%9A%AE%E8%82%A4 上 ...