博客图片的点击放大功能zoom.js

对于图片较多的博客文章,点击放大高清图片,并且最好产生遮罩层使得视觉效果更集中是一个较好的交互体验。很多图片网站,包括最近改版的简书都有这个功能。

zoom.js是一个很好很轻量的jQuery插件,使用起来也是很简单。在Github下载源文件后,将相应的css文件添加到header部分,将对应的zoom.js和其动画依赖放到footer部分。

<script src="js/jquery.min.js"></script> #如果没有需要添加jQuery插件库
<link href="css/zoom.css" rel="stylesheet"> #放到header部分
<script src="js/transition.js"></script> #放到footer部分
<script src="js/zoom.js"></script> #放到footer部分

使用该效果的图片需要具有data-action属性。如果你想一篇文章所有图片都自动具有该效果,还可以用js自动添加。

<img src="img/blog_post_featured.png" data-action="zoom"> #添加data-action属性

#使用js自动添加data-action
$(document).ready(function(){
$("#post-<?php the_ID(); ?> p:has(img)").each(function(){
$('img').attr('data-action','zoom');
})
});

图片放大效果的还原支持再次点击、ESC键或者鼠标滚动。下面是简单的效果示意,请猛击图片。

1357097291702


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/bo-ke-tu-pian-de-dian-ji-fang-da-gong-nengzoomjs/

已有2条评论