2

所以我有这样的挑战：身体背景上的图像，背景大小，覆盖整个屏幕。背景图像上有一些元素（建筑物）。所以我想将鼠标悬停在建筑物上，它们会改变颜色或添加阴影等。问题出在屏幕调整大小上，当我调整屏幕大小时，我找不到可以移动覆盖 div 以适应建筑物的公式背景。

html:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/fixes.js"></script>

<!--[if lt IE 9]>                
    <script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body class="home">
    <div class="map">       
        <div class="building1"></div>
    </div>
</body>
</html>

CSS：

.home{
  background:url(../img/homeBg1200.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

js：

$(document).ready(function() {
    function fixes() {
        var windowW = window.innerWidth,
            windowH = window.innerHeight;

        if(windowW > 1199) {
            var proportionH,
                proportionW,
                indexTop,
                indexLeft,
                top1,
                left1,
                width1,
                height1;



                //indexTop = (proportionH-800)/3;

                if((windowW / windowH) < 1.5) {
                    proportionW = (windowH * 1200/800);
                    proportionH = (proportionW * 800/1200);
                    indexLeft = (proportionW - 1200)*0.001;
                    indexTop = (proportionH - 800)*0.001;
                    top1 = proportionH*0.178-indexTop;
                    left1 = proportionW*0.476-indexLeft;
                    width1 = (proportionW )*0.084;
                    height1 = (proportionH)*0.482;
                } else {
                    proportionH = (windowW * 800/1200);
                    proportionW = (proportionH * 1200/800);
                    indexLeft = (proportionW - 1200)*0.001;
                    indexTop = (proportionH - 800)/2;
                    top1 = proportionH*0.178-indexTop;
                    left1 = proportionW*0.476+indexLeft;
                    width1 = (proportionW )*0.084;
                    height1 = (proportionH)*0.482;
                }

            $('.building1').css({
                'top': top1,
                'left': left1,
                'width':width1,
                'height':height1
            }); 

        }
    }

    fixes();

    $(window).resize(function() {
        fixes();
    });
});

有可能做到这一点吗？

谢谢

ps：刚刚复制了这里的代码：http: //hardware-trade.com/site/

4

1 回答 1

0

这可以在没有 javascript 的情况下修复。您应该在 css 中使用媒体查询。

于 2013-10-02T17:32:37.580 回答