jQuery图片浏览聚焦效果
jQuery 的图片浏览交互，背景自动变暗的效果，真的挺实用。像你在页面里点击一张图片时，整个背景会自动淡下去，只留那张图高亮展示，挺有“聚光灯”的感觉。这种效果适合做相册、商品预览之类的场景，不用依赖太重的插件，简单加几行 jQuery 代码就能搞定。
原理其实也不复杂，用jQuery监听图片的点击事件，动态加个全屏黑色遮罩层，再把那张被点击的图放大显示在中间。遮罩的透明度可以用rgba控制成半透明，看起来更柔和。用position: fixed配合transform让图片居中对齐，响应也快，代码也简单。
比如你用$('img').click()监听图片点击，再用
$('')background: rgba(0, 0, 0, 0.8)，加到body里就搞定了。点一下背景就能移除遮罩，体验流畅还不跳转页面。
另外如果你想要做得更细致一点，可以顺手加上图片懒加载、ESC 关闭、或者左右切换这些小功能。用 jQuery 来做这类页面交互，还是挺顺手的，调试起来也方便。
如果你也想试试类似效果，可以看看这几个相关文章：点击图片展示大图及黑背景、图片预览与背景遮罩，还有一个更炫的点击图片设置背景特效。
如果你在做产品展示页、相册功能，或者文章图片展示页，试试这个思路，会省掉不少插件加载的麻烦。
文件大小：756.49KB
评论区