视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery照片伸缩效果不影响其他元素的布局_jquery
2020-11-27 21:22:50 责编:小采
文档
之前在网上看到这种特效,无奈当时没有收藏网址,导致后来一度不知道这个特效是怎么实现的。今天特意在网上搜罗了一下,果然功夫不负有心人,被我找到了。

我也努力过自己尝试着写:

但只是单纯的图片放大,而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间)。

后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的。其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是js(jquery)是老大。

废话说了这么多,大家肯定还是很疑惑:这到底是什么特效呢?唉,我的语言表达能力还是很一般,下面我就截图来说明好了:

这个是网页打开的初始模样:

当把鼠标停留在以上6张图片的任意一张图片的时候,会出现我所说的特效(这里我把鼠标放在第3张作为示例):

你会发现图片是缩小了,鼠标放开图片感觉又放大了(回到初始状态),而没有图片溢出的现象,而且不影响其他图片和元素的布局。

下面贴代码了:
代码如下:



jQuery照片伸缩效果






下载本文
显示全文
专题