Question

我正在开发一个项目，它是一个简单的jquery动画设备。

但是如果我在完成图像动画后调用一个javascript事件，它会因某种原因改变它们的位置。我已经调查过这个问题已经有一段时间了，尝试用不同的方式编写jquery并没有帮助。这种行为有什么理由吗？

这是有问题的测试页面（对数字域道歉）：

http://62.133.128.32:8080/osiedle/index2.html

如果我删除了这个区间，它可以工作：

function updateTime() {
    var now = new Date().format("dd.MM.yyyy, hh:mm");
    $('.timeStr').html(now); 
}

在页面加载时设置如下：

setInterval(updateTime, 1000);

如果这被注释掉，点击底部的小矩形图标后，设备将滑出并正常运行。但如果事件在此动画期间/之后触发 - 图像将被破坏。可能是CSS问题而不是JS本身？这是我在引导程序之上设置的CSS：

<style type="text/css">
    body {
        background-image:url('img/bg.png');
        background-repeat:no-repeat;
        background-position:right top;
        background-size: cover;
        padding:0; margin:0;

    }
    .device {
        position:absolute;
        top:10%;
        left:20%;
        right:20%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        z-index: 998;
    }
    .home {
        position: absolute;
        top:60%;
        left:20%;
        right:20%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        z-index: 999;
    }
    .time {
        position: absolute;
        top: 55px;

        left: 46.5%;

        z-index: 999;
    }
    .timeStr {
        color: #fff;
    }
    .tablet {
        position: fixed;
        top: 85%;
    }
    .upleft { position:relative; left:-160px; top:-160px; }
    .upright { position:relative; left:160px; top:-160px; }
    .downleft { position:relative; left:-160px; top:160px; }
    .downright { position:relative; left:160px; top:160px; }
    a { outline:none; height: 10px; }
    p { padding:0; margin:0; }
    img { border:0;
          vertical-align: baseline;}
    #tab-scrollcontainer { height:461px; width:620px; position:absolute; top:140px; left: 520px; overflow:hidden; z-index:999;}
    .tab-row { clear:both; }
    .icon { float:left; margin:9px 11px; }
    .ico_txt { text-align:center; font-family:Georgia, Times, serif; font-size:10px; color:#d4d4d5; }
    #sb-items { width:100%; height:368px; display:none; }
</style>

Answer 1

根据你的评论，这可能是不相关的，但我注意到你的图标并不总是正确排列（行之间有一个双重空格）。

我原本以为（或许是错误的）这是你希望解决的问题。

以下是截图：

enter image description here

忽略面板本身的左对齐，你的“行”之间存在较大差距的原因是CSS清除错误，您可以通过更改.tab-row的CSS中的clear属性来解决此错误：

.tab-row {
    clear: left;
}

Answer 2

将名为updateTime的函数更改为其他内容可能很简单。

function updateTimeForPage() {
    var now = new Date().format("dd.MM.yyyy, hh:mm");
    $('.timeStr').html(now); 
}

和

setInterval(updateTimeForPage, 1000);

在jquery调用后重新定位不需要的图像

2 个答案: