JavaScript图片梯形排列与悬停缩放效果

js 图片的梯形排列 + 鼠标滑过缩放效果，视觉上确实挺抓人眼球的。图片像扇形一样排开，一滑上去还自动放大，有点像展示橱窗里的动态陈列。适合电商、摄影集、或者想搞点视觉花活儿的展示页。

核心逻辑其实不复杂，JavaScript主要负责监听鼠标事件，比如mouseover、mouseout，一触发就给对应图片加个transform: scale()效果，再配合CSS3 的 transition，缩放动画自然又顺滑。

图片布局方面，建议用绝对定位，每张图片手动调个left和top，搭出梯形结构。如果你不想写死坐标，也可以用 JS 动态计算位置，这样更灵活。

性能优化方面要注意，别每张图都绑个事件监听器，图片多了容易卡。推荐用事件委托挂在父容器上，响应也快，代码也清爽。

效果代码都打包在texiao4440_1560681040里了，HTML、CSS、JS 文件都有，直接拿来研究或者改改就能用。要是你还想扩展点别的动画，可以顺手看看这些：

• 超酷图片画廊鼠标滑过动画
• 图片缩放鼠标缩放 Touch 缩放
• 纯 CSS3 鼠标滑过图片效果动画库

如果你在做展示类页面，又想加点动态感，试试这个，视觉效果还挺加分的。