1

我试图以某种方式（使用 CSS 或 JS）将非居中元素扩展到整个页面，同时到达所有边缘。

div 将是空的（只是带有背景或类似的东西，实际上不是必须是 div，可以是任何其他看起来像框的元素）并且可以使用 CSS3 或 HTML5。我没有使用 jQuery，但如果有人找到使用它来解决这个问题的方法，没问题。

目前我最好的尝试是这个：http: //jsfiddle.net/ApKEu/

CSS：

.box {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
    position: absolute;
    top: 100px;
    left: 20px;
}

.box:hover {
    -webkit-transition: all 3000ms;
    -webkit-transform: scale(2);
    height: 90%;
    width: 90%;
}

然后只需在 HTML 中创建 div：

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

但是盒子不会同时到达所有边缘:(

对不起我的英语，谢谢你的帮助！

4

3 回答 3

1

使用 jQuery：http: //jsfiddle.net/jTFwB/

$(".box").bind("mouseover", function() {
    var n = $(this).clone();
    var of = $(this).position();
    n.css({
        position:'absolute', 
        top: of.top, 
        left: of.left, 
        margin: 0
    }).appendTo("body")
    .animate({
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        position: 'relative'
    });

    n.bind("mouseout", function() {
        $(this).stop(true).remove();
    });
});
于 2013-03-13T18:49:17.590 回答
0

我不清楚您想要什么，但是我可以提出几点建议。

  1. 您需要指定 , 的宽度和高度<html>，<body>以将框扩展到屏幕边缘。

    正文, html { 宽度:100%; 高度：100%；}

  2. 要扩展到屏幕边缘，您不能缩放两倍。它会比屏幕边缘大。

    .box:hover { -webkit-transition: 全部 3000ms; 左：10%；前10名％; 高度：80%；宽度：80%；}

看看我在你的例子中欺骗了什么

于 2013-03-13T18:56:28.167 回答
0

如果尝试这个悬停框怎么办：

.box:hover {
    height: 100%;
    width: 100%;
    position:fixed;
    top:0;
    left:0
}
于 2013-03-13T18:58:34.143 回答