Question

我正在使用的图片位于以下网址：http://migentemobile.com/wp-content/themes/migente/img/migente-mobile-carousel.png phone

正如您所看到的，图像上的时钟是静态的。我被要求将一个工作的js时钟置于静止时钟的上方，用于眼睛糖果。

我有以下jsFiddle。

或者这是完整的标记

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Migente Carousel with working clock</title>
    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        html, html a {
            -webkit-font-smoothing: antialiased;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
        }
        .container {
            background-color:#fff;
            margin:auto;
            width:70%;
        }
        #clock {
            -moz-transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -o-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            background-color:#000;
            color:#9C9C9C;
            display: table-cell;
            -webkit-font-smoothing: antialiased;
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            font-family:"Helvetica Narrow", "Arial Narrow", Tahoma, Arial, Helvetica, sans-serif;
            font-size:16px;
            font-weight:600;
            height:20px;
            left:833px;
            padding:1px;
            position:relative;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
            top:-157px;
            width:50px;
            zoom: 1;
        }
    </style>
    <script>
        function checklength(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }

        function clock() {
            var now = new Date();
            var hours = checklength(now.getHours());
            var minutes = checklength(now.getMinutes());
            var seconds = checklength(now.getSeconds());
            var format = 1; //0=24 hour format, 1=12 hour format  
            var time;

            if (format == 1) {
                if (hours >= 12) {
                    if (hours == 12) {
                        hours = 12;
                    } else {
                        hours = hours - 12;
                    }
                    time = hours + ':' + minutes + ':' + seconds;
                } else if (hours < 12) {
                    if (hours == 0) {
                        hours = 12;
                    }
                    time = hours + ':' + minutes + ':' + seconds;
                }
            }
            if (format == 0) {
                time = hours + ':' + minutes + ':' + seconds;
            }
            document.getElementById("clock").innerHTML = time;
            setTimeout("clock();", 500);
        }
        window.onload = clock;
    </script>
</head>

<body>
    <div class="container">
        <img src="http://migentemobile.com/wp-content/themes/migente/img/migente-mobile-carousel.png" class="carousel-macbook" alt="carousel" />
        <div id="clock"></div>
    </div>
</body>

</html>

根据我目前的决议，这很好用。但是，在浏览器调整大小或更改分辨率时，时钟不再正确定位。如果浏览器调整大小或在不同平台（即手机，平板电脑，台式机等）上查看，我想使图像响应并保持js时钟对图像的位置......

我正在阅读关于位置相对的http://learnlayout.com/position.html（幻灯片7/19），我认为这是目标，因为我希望时钟的位置是基于图像大小的相对位置。但是我显然在这里遗漏了一些东西，因为当我调整浏览器大小或在移动设备上查看时，时钟不会停留在它所属的位置。

非常感谢您对此项目的任何帮助！

更新

在

中看起来不错

Safari 5
IE 10＆amp; 9
Chrome 26＆amp; 25

时钟的位置已关闭

Firefox 19

排名正常，但文字未在

中旋转

Opera 12
IE 8＆amp; 7＆amp; 6

Answer 1

IE9之前不支持CSS转换属性。

对于Firefox（也许还有Opera），“display：table-cell”属性导致浏览器拒绝呈现“position：relative”属性。请改为使用“display：inline-block”。

“position：relative”将元素相对于它的父容器定位。所以它根据“.container”定位元素，而不是img。当我在jsFiddle中查看.container时（通过给它一个“背景：＃ff0099”），看起来它将是不同的大小和设备的不同位置，特别是当设备旋转时。这可能就是弄乱你的时钟相对于图像的位置，而图像没有相对于变化的.container的位置。

如果你将“.container”设为图像的确切尺寸，并给图像一个位置（即“position：relative; top：0; left：0;”），你应该能够为设备更加一致地操纵时钟的位置，因为图像和容器的位置相同，现在它们不是。

BTW我觉得时钟非常酷！

响应式CSS，如何在调整大小时使图像与图像保持一致

1 个答案: