0

我正在使用的图像位于此 URL： http: //migentemobile.com/wp-content/themes/migente/img/migente-mobile-carousel.png 电话

如您所见，图像上的时钟是静态的。我被要求在静态时钟之上放置一个工作的 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）关于相对位置的信息，我认为这是目标，因为我希望时钟的位置是基于图像大小的相对位置。但是，我显然在这里遗漏了一些东西，因为当我调整浏览器的大小或在移动设备上查看时，时钟不会停留在它所属的位置。

对此项目的任何帮助将不胜感激！

更新

看起来不错

  • 野生动物园 5
  • 即 10 和 9
  • 铬 26 和 25

时钟的位置在

  • 火狐 19

位置确定，但文本没有旋转

  • 歌剧 12

  • 即 8 & 7 & 6

4

1 回答 1

1

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

对于 Firefox（也许还有 Opera），“display: table-cell”属性导致浏览器拒绝呈现“position:relative”属性。请尝试“显示：内联块”。

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

如果您将“.container”设置为图像的确切尺寸，并在图像内部指定一个位置（即“位置：相对；顶部：0；左侧：0；”），您应该能够操纵时钟的设备的位置更加一致，因为图像和容器的位置将相同，而现在并非如此。

顺便说一句，我认为时钟非常酷！

于 2013-05-02T21:59:36.520 回答