你将如何实现这种3D悬停效果?

时间:2012-03-07 01:03:56

标签: jquery html css

当你翻过DIV时,我正试图做一个3D鼠标悬停效果。这就是现在的样子

http://jsfiddle.net/6TNBU/

我想知道如何排序,左下角和右上角会有一个更清晰的阴影,倾斜的风格。我想也许在这些角落加一个三角形,但我想知道是否还有其他方法可以实现这一点。

谢谢

2 个答案:

答案 0 :(得分:3)

如果你不介意使用伪元素,那就是::before::after(虽然请注意,我记得,IE不识别双冒号声明,所以你' d真的必须使用:before:after):

#box::before {
    content: ' ';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: 0;
    height: 100%;
    background-color: #f90;
    border-bottom: 10px solid white;
    border-right: 10px solid black;
}

#box::after {
    content: ' ';
    position: absolute;
    top: -10px;
    left: -10px;
    right: 0;
    width: 100%;
    border-bottom: 10px solid black;
    border-right: 10px solid white;
}

JS Fiddle demo

答案 1 :(得分:1)

我认为尝试“blocklets”方法会很有趣,即使用div s通过在背景和框之间分层div来创建3D的外观,并使用-betweens从父项偏移一个像素顶部和左侧以创建深度外观。

请注意,我并不是说这是一个很好的方法,因为许多问题可能会影响性能。但是,我惊喜地发现,使用下面的代码我可以获得相对较好的性能,是的,它似乎在IE7 / 8/9以及FF10和Chrome 17中工作(原样)。

所以如果它对你有用,我很高兴听到这个,虽然我会赶紧补充它,但它真的只是一个起点/起点。我观察到一些已知问题,例如多个框导致动画有点崩溃。但它似乎可以用一个盒子工作,我想通过一些工作可以使它更好地工作,甚至可以移植到一个插件(如果有人这么想的话)。

如果您有任何问题或者您是否有任何可以/应该修复的问题,或者您认为它是愚蠢/无意义/ just turrible并且可以解释原因,请告诉我。

<强> HTML

基本标记:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>​

<强> CSS

我添加了边框,因为我觉得它看起来更好:

.shadow {
    position: relative;
    float: left;
}
.threed {
    background: black;
    position: absolute;
    top: 0;
    left: 0;
}
.box {
    width: 298px;
    height: 298px;
    background: #cacaca;
    position: relative;
    border: 1px solid #aaa;
    border-left: 1px solid #acacac;
    border-top: 1px solid #acacac;
}​

<强>的jQuery

$(function(){
    var $threed = $('<div class="threed">'),
        $shadow = $('<div class="shadow">'),
        offset = 0;

    var init = function($jq, distance, speed){
        $jq.each(function(){
            var $this = $(this),
                $threeds,
                $shadow_clone = $shadow.clone(),
                $threed_clone,
                borderlw = parseInt($this.css('border-left-width')),
                borderrw = parseInt($this.css('border-right-width')),
                bordertw = parseInt($this.css('border-top-width')),
                borderbw = parseInt($this.css('border-bottom-width')),
                width = parseInt($this.innerWidth()) + borderlw + borderrw,
                height = parseInt($this.innerHeight()) + bordertw + borderbw,
                dimensions = {height: height, width: width};

            $shadow_clone.css({
                height: height + distance, 
                width: width + distance}
            );

            $this.data('distance', distance).wrap($shadow_clone);

            for (var i = 0; i <= distance; i++) {
                var $threed_clone = $threed.clone();

                $this.before($threed_clone);
                $threed_clone.css(dimensions).data('dimensions', {
                    left: i, top: i
                });
            }

            $this.data('threeds', $this.siblings('.threed'));

            $this.mouseenter(function(){
                var offset = 0,
                    properties = {
                        left: distance, 
                        top: distance
                    },
                    options = {
                        duration: speed, 
                        step: goUp, 
                        complete: finishThreeD
                    };

                $(this).stop().animate(properties, options);
            })
            .mouseleave(function(){
                var properties = {
                        left: 0, 
                        top: 0
                    },
                    options = {
                        duration: speed, 
                        step: goDown, 
                        complete: finishTwoD
                    };

                $(this).stop().animate(properties, options);
            });
        });
    };

    var goUp = function(){
        var _offset = parseInt(this.style.left);

        if (_offset > offset) {
            offset = _offset;

            $($(this).data().threeds[offset - 1])
                .prevAll('.threed').each(function(){
                    $(this).css($(this).data().dimensions);
                });
        }
    };

    var finishThreeD = function() {
        $(this).data().threeds.each(function(){
            $(this).css($(this).data().dimensions);
        });
    };

    var goDown = function (){
        var _offset = parseInt(this.style.left);

        if (_offset < offset) {
            offset = _offset;

            $($(this).data().threeds[offset - 1])
                .nextAll('.threed').css({top: 0, left: 0});

            if (offset === 0) {
                $(this).data().threeds.css({top: 0, left: 0});
            }
        }
    };

    var finishTwoD = function (){
        $(this).data().threeds.css({top: 0, left: 0});

        offset = 0;
    };

    var inc = 1;

    $('.box').each(function(){
        init($(this), 10 * inc, 100 * (2.5 * inc));
        inc++;
    });
});​

http://jsfiddle.net/zuppm/