CSS图书馆 » HTML & CSS » zoom.js 视觉连续图像放大jQuery插件

zoom.js 视觉连续图像放大jQuery插件

发表于: HTML & CSS. 评论 (1)
Sponsor

视觉连续是一个很友好的交互体验,一般在影视动画媒体比较重视,而在网页设计和APP UI设计上却少见,并且国内也没这方面的资料,不过没关系,设计达人网小编们已经开始搜集这方面的资和插件,并会被各大媒体网站传播,很快会流行起来。

接下来看看今天分享的视觉连续图像放大jQuery插件:zoom.js,该插件很简单,就是实现图像放大,其效果和medium网站的文章图片放大效果差不多,简约美观。

zoom-js

Zoom.js演示

Zoom.js放大的时候会从原图像的位置以动画方式放大到画面中间,此外还有3个操作方式可用来关闭放大的图像:

  • 鼠标单击图像;
  • 按Esc键;
  • 向上或向下滚动页面。

zoom-js-plugin-demo

Zoom.js 使用教程

STEP 1:引入jQuery插件库、Bootstrap的transition.js文档(动画是依赖这个JS的)以及zoom.js、CSS,代码如下:

<head>
 <link rel="stylesheet" type="text/css" href="css/zoom.css">
</head>
<body>
 ...
 你的内容
 ...
 <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
 <script src="js/transition.js"></script>
 <script src="js/zoom.js"></script>
</body>

STEP 2: 为要放大的图像添加data-action="zoom"属性

<img src="img/blog_post_featured.png" data-action="zoom">

总的来说,Zoom.js插件适用于文章类型的图片放大,缺点就是没有Fancybox这些强大功能,希望作者日后能升级下。

插件名称:Zoom.js
演示地址:https://fat.github.io/zoom.js
下载地址:https://github.com/fat/zoom.js
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论One Response to “zoom.js 视觉连续图像放大jQuery插件”

  1. 老赵茶馆 - 回复

    类似这个效果的插件还有Fluidbox和MediumLightbox,github上可以找到。


{ 发表评论 }