Question

Apple将鼠标悬停在一张大图像上时有一个非常酷的功能：http://www.apple.com/aperture/what-is.html它缩小了一个小放大镜玻璃图标，该图标随着光标在可缩放图像上移动。

我怎么能这样做，最好是用JQuery？

Answer 1

您可以像这样使用CSS：

cursor: url(pix/cursor_ppk.gif), auto.

见这里：http://www.quirksmode.org/css/cursor.html

Answer 2

在jQuery中为mouseenter（）和mouseleave（）设置事件处理程序。

在mouseenter（）期间，显示缩放图标并在mouseleave（）触发时隐藏它。您应该使用CSS类实现这两种状态。缩放图标应该是绝对定位的，其定位容器应该是网页的主体。

然后，在图像上实现mousemove（）事件。在此功能中，设置缩放图标的绝对位置，使其始终从当前鼠标位置稍微向上。

示例事件绑定

$('.someImage').bind('mouseenter', function () {

    $('#zoomIcon').addClass('over');

}).bind('mouseleave', function () {

    $('#zoomIcon').removeClass('over');

}).bind('mousemove', function (e) {

    $('#zoomIcon').css('top', e.clientY-40).css('left', e.clientX);

});

这可以获得缩放图标行为。点击事件行为只是几行。以下代码显示了一个手工制作的缩放功能，该功能使用了新的css3规则。此代码是为webkit构建的，但您可以轻松添加其他特定于浏览器的规则以获得良好的跨浏览器支持。

缩放功能检查鼠标单击的位置，并将该位置转换为四个象限中的一个。如果您愿意，可以将图像分割成更多象限。然后，一旦知道了象限，就可以设置绝对位置并更改图像的高度/宽度。 css3过渡属性会降低高度/宽度变化，因此您可以获得一个很好的缩放功能。

示例缩放行为

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <title>sample zoom</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

    <style> 
        #zoomContainer,
        #zoomContainer img {
            height:300px;
            width:400px;
        }
        #zoomContainer img {
            -transition-property: height,width;
            -webkit-transition-duration: 3s;
            position:absolute;
        }
        #zoomContainer {
            background:#F00;
            overflow:hidden;
            position:relative;
            border:1px solid #000;
        }
        #zoomContainer.over {
            cursor:pointer;
        }
        #zoomContainer img.zoom {
            width:962px;
            height:517px;
        }
    </style> 

    <script type="text/javascript"> 

        /* my custom jQuery extension */

        (function ($) {

            $.fn.setPositionByQuadrant = function (quadrant) {

                switch (quadrant) {

                    case 1:
                    this.removeAttr('style').css('top', 0).css('left', 0);
                    break;

                    case 2:
                    this.removeAttr('style').css('top', 0).css('right', 0);
                    break;

                    case 3:
                    this.removeAttr('style').css('bottom', 0).css('left', 0);
                    break;

                    case 4:
                    this.removeAttr('style').css('bottom', 0).css('right', 0);
                    break;
                }

                return this;
            };

        })(jQuery);

        /* page specific javascript */

        $(function () {

            $('#zoomContainer').mouseenter(function () {
                $(this).addClass('over');
            }).mouseleave(function () {
                $(this).removeClass('over');
            }).mousemove(function () {
                // change position of zoom icon here
            }).click(function (e) {
                var quadrant = convertClickPositionToQuadrant(e, $(this));
                var img = $(this).find('img').toggleClass('zoom').setPositionByQuadrant(quadrant);
            });

        });

        /* conversion function */

        function convertClickPositionToQuadrant(e,target) {

            var x = e.offsetX;
            var y = e.offsetY;

            var xMiddle = target.width() / 2;
            var yMiddle = target.height() / 2;

            if (x > xMiddle) {
                if (y > yMiddle)
                    return 4;
                else
                    return 2;

            } else {
                if (y > yMiddle)
                    return 3;
                else
                    return 1;
            }
        }

    </script> 

</head> 

<body> 

    <h2>Sample Zoom</h2>

    <div id="zoomContainer">
        <img src="http://dots.physics.orst.edu/graphics/image_maps/usa_map.gif" alt="" /> 
    </div> 

</body>
</html>

Apple就像鼠标悬停缩放光标一样

2 个答案: