jQuery相对与Flash的魔力已经贯穿整个网络。尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边站了。

  相比笨重的Flash,使用jQuery可以轻松的创建复杂的自定义动画效果以及提供友好的SEO,因此在两者之间的选择也就是明摆着的事儿了。

  一些酷炫的jQuery 图片效果,类似于不同方向滑入,轻松添加动画,掷入、排序、放大效果,摇拍,图片拍摄效果,滑动效果以及大量其他的仅仅需要少量编码的特效使得jQuery称为开发者和网站制作的首选。

  下面的jQuery插件对含有需要大量空间的巨型图片的网站非常有用–通常有这样沉重的图像负载的网站,其加载过程会非常慢,但通过这些 jQuery 图像插件,图像不仅能够用无限的特效呈现视觉刺激,而且页面加载的速度也会达到标准。

  这里介绍的是20个jQuery图像缩放插件的演示,它们可以描绘出无数的图像效果,可以被利用来为最终用户提供一个更诱人的视觉体验。享受它们吧!

  1. ElevateZoom

  ElevateZoom是一个可以轻松创建图像缩放界面的高度可定制jQuery插件。它可以对一个单独的高品质图像或两幅图像(一个缩略图和一个高品质版本)进行工作。缩放窗口可以放置在页面(或图像)的任何部分,还有一个选项可以内置缩放以节约视觉空间。

  2. Mlens

  mlens,是一个很小的jQuery插件(minified 和 gzipped 之后只有约 1KB),简化创建了这个放大镜的很多功能。它有几个参数,如镜片的形状(圆形或方形)、镜头的尺寸,以及定制边界的选项。它的多个实例可以用在同一页面,其WordPress插件正在开发中。

  3. Cloud Zoom

  Cloud Zoom 是许多高知名度的零售网站都使用的一个横空出世的流行jQuery图像缩放插件。持续改进,定期更新和技术支持使它成为那些为了客户而需要一个成熟、可靠的jQuery图像缩放解决方案的忙碌开发者们青睐的选择。

  4. Nivo Zoom

  Nivo Zoom 是一个类似Lightbox但更为简单的图像缩放jQuery插件,来自流行的 Nivo Slider 的开发者。此插件是轻量级的(压缩后只有4KB),只集中在图像上,并配备了一堆的设置。它支持5种不同的变焦类型,并可以显示图像的标题(能很好处理长文本)。

  5. FancyBox

  FancyBox 是一个可以为你网页上的图像、HTML内容和多媒体提供漂亮和优雅的缩放功能的工具。它建立在流行的JavaScript框架jQuery之上,易于实施和定制。

  6. Zoomy

  Zoomy 是一个快速和易于集成的插件,可以放大任何图片。它是一个灵活的缩放插件,可以用于同一图像的两个拷贝,或者一个链接到其自身的图像。大多数的CMS系统会保存或创建同一图像的多个尺寸版本,所以它可以被轻松设置。只需在所显示的较小的图像上链接较大的放大图像,并告诉插件缩放时使用该链接即可。这只需要一点点脚本。

  7. EasyZoom

  EasyZoom 是一个优雅的、高度优化的jQuery图像放大和平移插件,它基于 Alen Grakalic 的工作。EasyZoom 支持触摸式设备,并很容易用CSS定制。

  8. jQuery Zoom

  jQuery Zoom 是一个jQuery的小插件,用于在 mousedown 或 mouseover 时放大图像。它已经在 Firefox,Safari,Chrome,Internet Explorer 6、7、8、9,和 Opera 11 下测试通过。它遵循MIT协议发布。

  9. Zoomooz.js

  Zoomooz.js 是个易用的可以对任意网页元素进行放大的jQuery插件。你只要对任意 HTML 元素添加名为“zoomTarget”的class,就可以对其添加放大效果。放大可以通过点击body来重置。它在Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera 和 Chrome 上测试通过。

  10. Easy Image Zoom

  Easy Image Zoom 是一个轻量极的 jQuery 插件,允许用户在中等尺寸的图像上移动鼠标时看到更大的细节。它可以通过几个选项和简单的CSS定义实现定制。它适用于需要产品图像放大的项目。

  11. jPhotoGrid

  jPhotoGrid 接收一个简单的图像和标题列表,然后把它们变成一个可被查看和缩放的照片网格。几乎这个插件所有的风格都是在CSS中定义的,诀窍是通过浮动(float)列表项来布局网格。该插件将做的第一件事,就是把这些都绝对定位。这就是为什么插件能在一个单独的图像上放大然后把它返回到它原来的地方。

  12. jZoom Evolution

  jQZoom Evolution(进化)是一个有全部功能的 jQZoom 的新版本。它是一个建立在流行的 JavaScript 框架 jQuery 之上的 JavaScript 图像放大镜。它正是你所需要的放大镜脚本,很棒而且非常易用。它很容易定制,并能在所有时髦浏览器中工作。本软件按GPL协议授权使用。你可以在你的网站上使用 jQZoom,无论是电子商务网站还是任何其它类型。

  13. Fresco

  Fresco(壁画)是一个美丽的响应式灯箱。它能够在每种设备上的所有浏览器中创造惊人的覆盖,并在任何尺寸的屏幕上完美工作。更为惊艳的是它还可以全屏缩放,有支持视网膜技术的皮肤,支持刷卡事件,为HTML5视频集成了YouTube和Vimeo,有强大的JavaScript API。

  14. jQuery Snipe

  Snipe 是一个可以给图片加上狙击镜风格的 jQuery 缩放插件。当鼠标在图片上滑过时,Snipe 会在鼠标位置加上实时放大效果,就好像你拿着AWP端详你的猎物。

  15. ZoomImage

  用个性方式表现你的图像。指向图像的链接被悄悄劫持了,取而代之的是在页面内弹出的带有阴影和边框的DIV里显示图像。

  16. Mosaiqy

  Mosaiqy是一个用于查看和缩放照片的jQuery插件,工作于Opera9+,火狐3.6+,Safari3.2+,Chrome和IE7+。照片是从一个JSON/JSONP数据结构中检索的,随机在网格内移动。在最新的浏览器中使用CSS3过渡通过你的GPU接管所有昂贵的动画,最大限度地减少CPU开销。 (对于技术细节请参见GitHub项目的README文件)。

  17. Anything Zoomer

  Anything Zoomer 给你的图片提供一个近距离放大视图。

  18. jQuery gZoom Plugin

  它有如下特点:点击“+”和“-”按钮缩放;可以在图像上用鼠标滚轮拖动滑动条来变级缩放;放大后在图像上移动鼠标可以平移;点击图像可以用 lightbox 风格显示全图。

  19. Leroy Zoom

  小于 4KB 的一个轻量和易于使用的图像放大jQuery插件。

  20. ImageLens

  Imagelens 可以让你为图像添加透镜式放大效果。

  原文地址:http://codegeekz.com/20-jquery-image-zoom-plugins-for-stunning-effects/

20 个具有惊艳效果的 jQuery 图像缩放插件的更多相关文章

  1. 11个新鲜出炉的jQuery图像滑块插件

    如今图像滑块已成为一种流行的Web设计元素,通过滑块,你可以在有限的页面空间中展示更多的内容,带给用户更佳的浏览体验.本文将为你带来一些非常实用的jQuery图像滑块插件. 1.  Basic Sli ...

  2. 15 个响应式的 jQuery 图像滑块插件

    设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLID ...

  3. viewer.js--一个强大的jQuery图像查看插件

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 查看演示      立即下载 部分插 ...

  4. Viewer 是一款强大的 jQuery 图像浏览插件。

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 链接: viewer的官方演示,及g ...

  5. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  6. jQ效果:jQuery时间轴插件jQuery Timelinr

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...

  7. Viewer.js 是一款强大的 jQuery 图像浏览插件。

    https://blog.csdn.net/qq_29132907/article/details/80136023 一.效果图  二.代码<!DOCTYPE html><html ...

  8. jQuery 图像裁剪插件Jcrop

    ,    // 设置框的最大宽度          setSelect: [ 175, 100, 400, 300 ]        });                $('#text-input ...

  9. jquery 图片缩放插件使用

    https://cdn.bootcss.com/d3-transition/1.1.1/d3-transition.js http://www.jq22.com/jquery-info9291

随机推荐

  1. JAVAEE——SSH项目实战04:联系人添加、列表显示和修改

    作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7159337.html 一.联系人添加 1.添加页面设计    linkman/list. ...

  2. javascript中switch的用法注意

    switch中文翻译过来是转换.切换的意思.用在js中,各个条件转换而执行不同代码.

  3. [ 转载 ] Java基础10--关于Object类下所有方法的简单解析

    关于Object类下所有方法的简单解析 类Object是类层次结构的根类,是每一个类的父类,所有的对象包括数组,String,Integer等包装类,所以了解Object是很有必要的,话不多说,我们直 ...

  4. [HDU6155]Subsequence Count(线段树+矩阵)

    DP式很容易得到,发现是线性递推形式,于是可以矩阵加速.又由于是区间形式,所以用线段树维护. https://www.cnblogs.com/Miracevin/p/9124511.html 关键在于 ...

  5. 鸟哥的私房菜:Linux文件与目录管理

    1. 目录与路径 1.1 相对路径与绝对路径           绝对路径:路径的写法『一定由根目录 / 写起』,如:/usr/share/doc 这个目录.     相对路径:路径的写法『不是由 / ...

  6. 【10.10校内测试】【线段树维护第k小+删除】【lca+主席树维护前驱后驱】

    贪心思想.将a排序后,对于每一个a,找到对应的删除m个后最小的b,每次更新答案即可. 如何删除才是合法并且最优的?首先,对于排了序的a,第$i$个那么之前就应该删除前$i-1$个a对应的b.剩下$m- ...

  7. Mysql的学习随笔day2

    关于输入中文的问题,各种更改完utf8后仍然乱码. 最后找到一种可行的方法:在insert之前,输入 set names 'gbk' 约束保证数据的完整性和一致性.约束分为表级约束和列级约束,前者可以 ...

  8. C# 高级编程9 第30章MEF C#可扩展编程之MEF第一章

    MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库 利用该库轻松地封装代码,避免生成脆弱的硬依赖项. 通过 MEF,不仅可以在应用程序内重用 ...

  9. Xcode 小技巧

    1.手动添加 #warning ,在不确定的 bug.错误.待定代码处,手动添加 #warning 行,在编译时间提醒自己需要处理的地方. 2.由于 arrayWithObjects: 和 initW ...

  10. jconsole监控上Linux上的JVM

    说明: 首先JConsole这个是JDK里面自带的工具  在JAVA_HOME/bin目录下,今天主要测试远程监控JVM 第一步:设置好需要远程机器的Tomcat 修改Tomcat下的配置文件:/us ...