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. 老赵茶馆 - 回复
    2015 年 05 月 15 日 上午 2:51

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


{ 发表评论 }