2

我正在尝试学习一点关于 javascript 及其工作原理的知识。我可以设法散列一些基本命令，但我正在尝试将此线程布局转换为 javascript onmouseover 命令，以便在留言板上与跨浏览器兼容，其代码不允许 css 悬停属性在 IE 中工作，除非它们在“一个”标签。请记住，我无法更改网页，只能更改一小部分布局，因此我无法设置 doctype 以使该 css 在 IE 中工作。

这是我没有 js 的情况：http: //jsfiddle.net/KRArE/

#postbody p::first-letter {
letter-spacing:1px;
line-height:0.5;
font-size: 30px;
font-family:'Lovers Quarrel', cursive;
}
#ruwhole {
width: 420px;
height: 420px;
position: relative;
overflow: hidden;
}
#ruwhole:hover .postbox {
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
position: absolute;
top: 0px;
width: 400px;
height: 370px;
border:10px solid #eeeddb;
}
#ruwhole .postbox {
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
position:absolute;
width: 400px;
height:370px;
top: -390px;
border:10px solid #eeeddb;
}
#ruwhole:hover .statbar {
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
}
#ruwhole .statbar {
-webkit-transition: 1s all ease-in;
-moz-transition: 1s all ease-in;
-o-transition: 1s all ease-in;
transition: 1s all ease-in;
position: absolute;
bottom: -30px;
width: 100%;
height: 30px;
}
#postbody em {
color: #841b1f;
}

我可以更改应用鼠标悬停的 div 的质量，但是我将如何将 mouseover js 命令应用于一个 div 并使更改出现在其他 div 中？我希望用户能够将鼠标悬停在整个布局上，并让两个不在屏幕上的 div 滑入，就像使用 css 函数一样。我在这里完全不知所措！

4

1 回答 1

0

我会尝试使用 jQuery 和jQuery Easing 插件

我很确定这将是 CSS 过渡的更安全的替代方案。

使用 jQuery，您可以将悬停事件附加到外部 div（“#ruwhole”），然后为内部 div（“.postbox”和“.statbar”）指定鼠标悬停和鼠标悬停动画。与单独的 jQuery 相比，缓动插件为您提供了更多的动画效果可供选择。

JavaScript 本身可能如下所示。这是一个基于您的jsFiddle的工作示例

（对不起，我无法在 IE 中测试。）

希望这可以帮助。

$(function () {

    var ruwhole = $('#ruwhole'),
        postbox = ruwhole.find('.postbox'),
        statbar = ruwhole.find('.statbar');

    ruwhole.hover(
        function () {
            postbox
                .animate(
                    { top: '0' }, {
                        duration: '1',
                        easing: 'easeInOutQuad'
                    }
                );
            statbar
                .animate(
                    { bottom: '0' }, {
                        duration: '1',
                        easing: 'easeInQuad'
                    }
            );
        },
        function () {
            postbox
                .animate(
                    { top: '-390' }, {
                        duration: '1',
                        easing: 'easeInOutQuad'
                    }
                );
            statbar
                .animate(
                    { bottom: '-30' }, {
                        duration: '1',
                        easing: 'easeInQuad'
                    }
            );
        }
    );

});
于 2013-07-06T10:39:26.483 回答