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 |
jquery zoom jquery放大镜特效的更多相关文章
- 基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
- JQuery仿购物网站放大镜特效所遇问题及思考
JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...
- JQuery zoom插件学习
jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- jQuery图片轮播特效
效果预览:http://hovertree.com/texiao/jquery/51/ 这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换. 使用的jQuery库版本为1.12.3 , ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- jQuery元宵猜灯谜特效(元宵十五日猜一个字)
在线体验:http://keleyi.com/keleyi/phtml/jqtexiao/35.htm jQuery元宵猜灯谜特效的HTML代码如下: <!DOCTYPE html> &l ...
- 网友微笑分享原创Jquery实现瀑布流特效
首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...
随机推荐
- js03 数组
变量的自动转换=== 等同符:不会发生类型的自动转化! == 等值符:会发生类型自动转化.自动匹配!判断相等没有equals()方法,只有2个等号3个等号. <!DOCTYPE HTML PUB ...
- thinkphp缓存使用
thinkphp缓存使用 一.总结 1.这里的缓存不是指的缓存的页面,而是cache,如果你缓存了一个数组,那么你就可以取出这个数组里面的数据进行使用,用法性质和cookie和session有点像 2 ...
- 洛谷P2234 [HNOI2002]营业额统计(01Tire树)
题目描述 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额.分析营业情况是 ...
- 暴力破解FTP服务器技术探讨与防范措施
暴力破解FTP服务器技术探讨与防范措施 随着Internet的发展出现了由于大量傻瓜化黑客工具任何一种黑客攻击手段的门槛都降低了很多但是暴力破解法的工具制作都已经非常容易大家通常会认为暴力破解攻击只是 ...
- Spring源码分析专题 —— 阅读指引
阅读源码的意义 更深入理解框架原理,印象更深刻 学习优秀的编程风格.编程技巧.设计思想 解决实际问题,如修复框架中的bug,或是参考框架源码,结合实际业务需求编写一个独有的框架 阅读源码的方法 首先是 ...
- 斜率优化dp练习
1.HDU3507 裸题,有助于理解斜率优化的精髓. dp[i]=min(dp[j]+m+(sum[i]-sum[j])2) 很显然不是单调队列. 根据斜率优化的的定义,就是先设两个决策j,k 什么时 ...
- javascript脚本从载入浏览器到显示执行的过程解析
版权声明:本文为博主原创文章,未经博主允许不得转载. 简单的代码: <script type="text/javascript" src="xxx.js" ...
- HDU——T 1576 A/B
http://acm.hdu.edu.cn/showproblem.php?pid=1576 Time Limit: 1000/1000 MS (Java/Others) Memory Limi ...
- Akka边学边写(4)-- MiniRPG
前面几篇文章用Akka写了HelloWorld和EchoServer,为了更进一步学习Akka,本文将会实现一个非常小的RPG游戏server:MiniRPG. 游戏逻辑 由于是迷你RPG,所以逻辑非 ...
- javasciprt cookies 操作
<script type="text/javascript"> function getCookie(c_name){ if (document.cookie.leng ...
