Question

我有一个div，我希望它在页面完成加载后1或2秒从屏幕右侧滑动。

如果不使用点击功能，我似乎无法做到这一点。我怎样才能做到这一点？

Answer 1

为页面加载添加回调函数：

<body onload="script();">

然后添加函数：

function script(){
     setTimeout(function(){
         document.getElementById('elementToMove').style.left = '1000px'; // new left position is 1000px in this example
     }, 2000); // 2000 = 2 seconds after page load
}

不要忘记添加CSS3过渡来创建滑动效果

#elementToMove{
  -webkit-transition: left 1s ease;
  transition: left 1s ease;
}

Answer 2

仅使用CSS动画即可实现。这是一个示例：

.slidein {
    float:right;

    animation-duration: 5s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-right: -30%;
    }
    to {
        margin-right: 0%;
    }
}

在页面加载时自动滑入div

2 个答案: