如何制作具有缩放所选图像和其他分散效果的图像库答案

【问题标题】：How do I make an image gallery with the effect of zooming selected image and the others scattered如何制作具有缩放所选图像和其他分散效果的图像库
【发布时间】：2019-03-05 00:18:12
【问题描述】：

到目前为止我的 javascript 代码：

$(document).ready(function(){
 $('.img1').mouseover(function(){
    /*  $('.img1').css({ "-webkit-transform ": "scale(2)",
                            "-moz-transform": "scale(2)",
                            "-o-transform": "scale(2)",
                            "transform": "scale(2)"
                        });   */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeOut(2500);
     $('.img1').mouseout(function(){
     /* $('.img1').css({"-webkit-transform ": "scale(1)",
                            "-moz-transform": "scale(1)",
                            "-o-transform": "scale(1)",
                            "transform": "scale(1)"});  */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeIn(2500);
     });
});

这是我的第一张图片的代码。

我想要实现的是，当我将一个图像悬停时，其他所有图像都应该分散。

【问题讨论】：

标签： javascript jquery jquery-ui css

【解决方案1】：

我宁愿选择纯 CSS，它更直接。使用:hover 选择器：

.container:hover > div
.container > div:hover

http://jsfiddle.net/GKSLk/（我只写了webkit，但你可以添加更多的浏览器支持）

【讨论】：

【解决方案2】：

尝试元素的通用类
每个元素都有不同的 id
在类中应用效果并应用悬停元素的效果ID

【讨论】：