个人中心
gpt4 book ai didi

javascript - 响应式 CSS，如何使时钟在调整大小时保持与图像的位置

转载 作者：太空宇宙 更新时间：2023-11-04 15:01:43 26 4
gpt4 key购买 nike

我正在使用的图像位于此 URL: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 和 9
  • Chrome 26 和 25

时钟的位置在

  • 火狐 19

位置正常但文本没有旋转

  • 歌剧 12

  • IE 8 & 7 & 6

最佳答案

IE9 之前的版本不支持 CSS transform 属性。

对于 Firefox(可能还有 Opera)，“display: table-cell”属性导致浏览器拒绝呈现“position: relative”属性。请尝试“显示:内联 block ”。

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

如果您将“.container”设为图像的确切尺寸，并在图像内部指定一个位置(即“position: relative; top: 0; left: 0;”)，你应该能够为设备更一致地操纵时钟的位置，因为图像和容器的位置相同，而现在不同了。

顺便说一句，我觉得这个时钟很酷!

关于javascript - 响应式 CSS，如何使时钟在调整大小时保持与图像的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16345089/

26 4 0
文章推荐： c++ - 我应该对循环 float 使用乘法还是除法？
文章推荐： javascript - 仅当 cookie 存在时才添加类，否则隐藏
文章推荐： java - java 和 openssl 签名不匹配
文章推荐： c++ - 调用 Struct 构造函数后初始化的值是什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com