使用jQuery和CSS3实现的缩略图邻近效应

Thumbnail Proximity Effect with jQuery and CSS3 图片悬停时，被放大凸显，同时按距离适度放大周边图片元素的大小，这样就呈现出一种物理学的邻近影响效应。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1571
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>





<html class="no-js" lang="en">

<body id="page">
    <div class="container">
        <header>
            <h1>Thumbnail <span>Proximity</span> Effect</h1>
            <h2>with jQuery &amp; CSS3 using <a href="https://github.com/padolsey/jQuery-Plugins/tree/master/proximity-event">"proximity-event"</a> by <a href="https://james.padolsey.com/">James Padolsey</a></h2>
        </header>
        <section class="pe-container">
            <ul id="pe-thumbs" class="pe-thumbs">
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/1.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/2.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/3.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/4.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/5.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/6.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/7.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/8.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/9.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/10.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/11.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/12.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/13.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/14.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/15.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/16.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/17.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/18.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/19.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/20.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/21.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/22.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/23.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/24.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/25.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/26.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/27.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/28.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/29.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/30.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/31.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/32.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/33.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/34.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/35.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#"><img src="https://tympanus.net/Tutorials/ProximityEffect/images/thumbs/36.jpg" />
                    </a>
                </li>
            </ul>
        </section>
    </div>
    <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/ProximityEffect/js/jquery.proximity.js"></script>
    <script type="text/javascript">
        $(function() {

var Photo = (function() {

// list of thumbs
                var $list = $('#pe-thumbs'),
                    // the images
                    $elems = $list.find('img'),
                    // maxScale : maximum scale value the image will have
                    // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
                    settings = {
                        maxScale: 1.4,
                        maxOpacity: 0.9,
                        minOpacity: Number($elems.css('opacity'))
                    },
                    init = function() {

// minScale will be set in the CSS
                        settings.minScale = _getScaleVal() || 1;
                        _initEvents();

},
                    // Get Value of CSS Scale through JavaScript:
                    // https://css-tricks.com/get-value-of-css-rotation-through-javascript/
                    _getScaleVal = function() {

var st = window.getComputedStyle($elems.get(0), null),
                            tr = st.getPropertyValue("-webkit-transform") ||
                            st.getPropertyValue("-moz-transform") ||
                            st.getPropertyValue("-ms-transform") ||
                            st.getPropertyValue("-o-transform") ||
                            st.getPropertyValue("transform") ||
                            "fail...";

if (tr !== 'none') {

var values = tr.split('(')[1].split(')')[0].split(','),
                                a = values[0],
                                b = values[1],
                                c = values[2],
                                d = values[3];

return Math.sqrt(a * a + b * b);

}

},
                    _initEvents = function() {

// the proximity event
                        $elems.on('proximity.Photo', {
                            max: 80,
                            throttle: 10,
                            fireOutOfBounds: true
                        }, function(event, proximity, distance) {

var $el = $(this),
                                $li = $el.closest('li'),
                                scaleVal = proximity * (settings.maxScale - settings.minScale) + settings.minScale,
                                scaleExp = 'scale(' + scaleVal + ')';

// change the z-index of the element once it reaches the maximum scale value
                            (scaleVal === settings.maxScale) ? $li.css('z-index', 1000): $li.css('z-index', 1);

$el.css({
                                '-webkit-transform': scaleExp,
                                '-moz-transform': scaleExp,
                                '-o-transform': scaleExp,
                                '-ms-transform': scaleExp,
                                'transform': scaleExp,
                                'opacity': (proximity * (settings.maxOpacity - settings.minOpacity) + settings.minOpacity)
                            });

});

}

return {
                    init: init
                };

})();

Photo.init();

});
    </script>
</body>

</html>

Thumbnail Proximity Effect with jQuery and CSS3 图片悬停时，被放大凸显，同时按距离适度放大周边图片元素的大小，这样就呈现出一种物理学的邻近影响效应。

模板，教程

编辑器支持Emmet

快捷键

Thumbnail Proximity Effect with jQuery and CSS3 图片悬停时，被放大凸显，同时按距离适度放大周边图片元素的大小，这样就呈现出一种物理学的邻近影响效应。

模板，教程

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

使用jQuery.Stapel.js插件实现自动分组的自适应缩略图片堆叠

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：