jquery zoom jquery放大镜特效
这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问:
http://www.mind-projects.it/projects/jqzoom/demos.php
觉得不错就下载一个玩玩吧,jQuery出来的插件都是非常容易使用的,也可以当做学习的示例.
如何安装:
先在网页中包含jQuery文件,然后再包含jQZoom的文件,如下:
<script type='text/javascript' src='js/jquery-1.2.6.js'></script> <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
然后再将jqzoom.css添加到网页中:
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
如何使用?
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
使用是很简单的,先指定一个<a>标签,指向一个大的图片,里面包含一个小图片:
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="data:images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a>
SMALLIMAGE.JPG:这个是默认用户看见的图片,也就是之后被放大的图片
BIGIMAGE.JPG: 放大镜所看到的图片
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).用来标识这个<a>标签要应用放大镜功能.之后我们可以通过class选择器来选择所有的要应用jQZoom的<a>标签.
MYTITLE/IMAGE TITLE: 这些文本它们会被显示在放大镜窗口上.
准备工作做完了就可以通过下面的简单代码来调用jQZoom:
$(document).ready(function(){$('.MYCLASS).jqzoom(); });
这样只是使用jQZoom的标签模式,事实上它有更多的参数可以设置,以获得更多的效果,看下面的示例:
$(document).ready(function(){var options = {zoomWidth: 300,zoomHeight: 250,xOffset: 10,yOffset: 0,position: "right" //and MORE OPTIONS };$('.MYCLASS).jqzoom(options); });
属性:
Cloud Zoom具有许多属性,设置这些属性可以改变图片的外观和视觉效果。
Cloud Zoom的属性可以在data-cloudzoom里指定属性,例如:
data-cloudzoom = "zoomImage: '/mypath.jpg', useZoom: '#zoom1'"
文本值/字符串在引用时应该加引号,如useZoom:“# myZoom”。数字、真假不用加,如zoomFlyOut:false
注意:Cloud Zoom的旧版本(2.1 1210171228)要求属性具有严格的JSON格式。虽然依然可以生效,但现在不推荐使用。
属性列表:
属性名 | 类型 | 描述 | 默认值 |
zoomImage | string | 缩放图片的路径,如果没有指定的缩放图片,将使用小图(在图像元素中被指定的图片) | " " |
tintColor |
string | 色彩效果 | #fff |
tintOpacity | number | 指定色彩的透明度,范围是0 - 1,0是完全透明,1是完全不透明。 | 0.25 |
animationTime |
number | 动画效果的持续时间,以毫秒为单位。 | 500 |
lensClass | string | 用于镜头的css类 |
cloudzoom-lens |
easeTime (DEPRECATED V3.0) | number | 鼠标滑上时放大图像的时间。数字越大缓动越大,为0时没有缓动。 | 500 |
zoomPosition |
number | string |
缩放窗口的指定位置,如果数字(0-15)的位置是相对于页面图像如图所示由以下关键(蓝色方块代表缩放窗口): 如果提供一个字符串,值将被用作一个选择器来确定元素的确切位置和大小的页面。 如果"inside"被指定,那么放大的图像将会出现在页面图像内,从3.0增加到1303151613,你也可以设置成zoomOffsetX:0 |
3 |
zoomOffsetX |
number |
允许您调整缩放窗口的水平位置。从3.0增加到1303151613并且在"inside"工作模式 |
15 |
zoomOffsetY | number |
允许您调整缩放窗口的垂直位置。从3.0增加到1303151613并且在"inside"工作模式 |
0 |
zoomFullSizeDEPRECATED (see zoomSizeMode) | boolean | 缩放窗口出现在全尺寸的放大图像。 | false |
zoomFlyOut | boolean | 将'flying'动画打开或关闭 | true |
zoomClass | string | 用于缩放窗口的css类 | cloudzoom-zoom |
zoomSizeMode | srting |
定义了缩放窗口和镜头大小的规则。
|
lens |
captionSource | string |
指定一个页面中的HTML属性图像作为文本标题。或者,指定一个选择器使用一些HTML内容的标题。 |
title |
captionType | string | 指定标题类型,“attr”或“html” | attr |
captionPosition | string | 标题的位置, "top" 或"bottom" | top |
uriEscapeMethod | boolean | string |
指定要使用的JavaScript逃离方法,"escape"或“encodeURI”(false = no escaping) ,不推荐使用特殊字符或图像路径有空格 |
false |
errorCallback | function |
指定一个函数当发生错误时调用。函数将会收到具有以下属性的错误对象:
在调用CloudZoom.quickStart()之前可以设置一个全局错误处理程序,例如:
|
function(error){} |
variableMagnification (from V3.0) | boolean | 是否允许变量放大 | true |
startMagnification (from V3.0) | string|number |
初始放大(小图像大小的乘数,不要给数字加引号)。“auto”将选择最好的质量并基于大图像尺寸放大。 |
auto |
minMagnification (from V3.0) | string|number |
最低允许放大(小图像大小的乘数)。“auto”将确保镜头尺寸不得大于小图像。 |
auto |
maxMagnification (from V3.0) | string|number |
最大允许放大(小图像大小的乘数)。“auto”将选择最好的质量基于大型图像尺寸放大 |
auto |
easing (from V3.0) | number | 数字越大,移动的越平滑越慢 | 8 |
lazyLoadZoom (from V3.0 rev 1302181432) | blooean |
延迟加载的zoom图像。如果这是真的,zoom图像只会在最初图像与小图像交互之后被加载,否则将立即加载页面加载。如果有许多需要加载的放大图像延迟加载可能有用。 |
false |
mouseTriggerEvent (from V3.0 rev 1302271415) | string | 鼠标事件用于触发放大。使用“mousemove”或"click" | mousemove |
disableZoom (from V3.0 rev 1303081245) | string|boolean |
使用禁用的zoom. false = no disable, true = disable always, "auto" = disable 只有zoom图像是相同的大小或小于小图像。注意,如果你有设置放大水平大于1,zoom不会被禁用。 |
false |
galleryHoverDelay (from 3.0 rev 1304251647) | number | 使用galleryEvent:'mouseover'会推迟改变图片数毫秒,阻止图像加载请求浏览器造成的拥塞。 | 200 |
permaZoom (from 3.0 rev 1308161049) |
boolean | 如果为真,当鼠标划离小图时缩放窗口会保持打开状态 | false |
zoomWidth zoomHeight (from 3.0 rev 1311041015) |
number | 设置缩放窗口的宽度/高度,如果设置为"auto"则窗口宽度/高度与小图片宽度/高度一致 | 0 |
lensWidth lensHeight (from 3.0 rev 1311041015) |
number | 设置镜头的宽度/高度 | 0 |
转载于:https://www.cnblogs.com/zonglonglong/p/4205496.html
jquery zoom jquery放大镜特效相关推荐
- jquery图片局部放大镜特效
部分代码(完整包见资源下载链接) 注:资源上传时默认付费,可以私信我,我看到会回复的 <!DOCTYPE html> <html><head><meta ch ...
- html实现放大镜效果,利用jquery实现放大镜特效
特效描述:利用jquery实现 放大镜特效.利用jquery实现放大镜特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 /* imgbox 当前图片区域 hoverbox 鼠标移入 ...
- html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效
zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果.该图片放大镜插 ...
- Jquery Mobile转场特效之slide | 小小iPhone开发
Jquery Mobile转场特效之slide | 小小iPhone开发 2012 Jquery Mobile转场特效之slide 作者:小小 发布:2012-12-12 14:03 分类:j ...
- jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...
- jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover
下载: zoom-master 项目地址: https://github.com/jackmoore/zoom Compatible with: jQuery 1.7+ in Chrome, Fire ...
- html响应式布局平移,jQuery图片内部缩放和平移插件jquery.zoom.js
插件描述:jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件.该插件可以鼠标滑过图片,点击图片或移动手机上触摸图片时,将图片进行放大或平移操作. 简要教程 jquery.z ...
- php 列表收缩展示插件,可展开和收缩的jquery FAQ问答列表特效
这是一款简单的jquery FAQ问答列表特效.该FAQ问答列表可以通过点击问题的标题来展开或收缩列表,它使用简单,方便实用. 使用方法 在页面中引入jquery. HTML结构 该FAQ问答列表采用 ...
- html怎样实现动态背景效果,利用jQuery实现动态背景特效
特效描述:利用jQuery实现 动态背景特效.利用jQuery实现动态背景特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Example 1 ooh, pretty. Notic ...
最新文章
- oracle用户创建及权限设置
- 中国移动系统集成公司2020春招技术综合在线编程题第二题
- 备忘录 | 当我每晚闲暇时我在干什么(2)
- 2018 蓝桥杯省赛 A 组模拟赛(一)数列求值+推导
- python元祖迭代_如何在Python中迭代元组的堆栈
- 03-sizeof的用法
- Linux在多线程应用程序中处理信号
- mysql修改字段结构_MySQL修改表结构及其添加删除修改字段功能
- 20210916:Verilog的整数类型易错点
- bzoj 1049: [HAOI2006]数字序列(DP+DP)
- 在Objective-C中分类对象和方法
- 学术论文答辩通用PPT模板
- win10手柄测试软件,win10系统如何校准和设置游戏手柄?windows10校准和设置游戏手柄的方法...
- java snakeyaml_SnakeYaml快速入门和使用
- java基于ssm三大框架的小区物业收费报修管理系统
- linux+hdmi分辨率设置,话说你们的双屏显示器是怎样设置的 尤其是外接显示器分辨率设置...
- System mem和AGP mem和video mem
- PMI权限(授权)管理基础设施
- 等保安全计算环境之Windows(安全审计+入侵防范)(二级)
- 微软云服务器路由跟踪,使用路由日志查看器
热门文章
- 网站被k不要慌,看看“老油条”们是怎么解决的吧!
- 网站面临改版!在修改标题后该如何快速提升排名?
- 营销网站SEO优化:前方优化难点出没!
- spss数据预处理步骤_数学建模准备必备的十个数据分析软件(数学建模从入门到精通)...
- php周计划表_PHP学习计划书
- 自学java的注意,自学Java开发注意事项
- c mysql备份还原数据库_如何备份和还原MySQL数据库?
- linux java开发配置_Linux-Java开发环境配置
- go语言学习(6)select的使用
- 查看suse系统版本