使用純JavaScript在頁面加載上重新定位div
[英]re-positioning a div on page load using pure javascript
問題描述
嗨，我想用javascript創建一些動畫，當我想到一些不起作用的東西（我是js的初學者），因此簡單來說，我在頁面頂部有一個框，我想更改其上的css屬性頁面加載，例如width，margin -top margin -bottom等
這是我的代碼-
<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
/* the code here */
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
此外，這種方法是正確且可行的，還是有其他解決我的問題的方法，如果可以，請也告訴我
1 個解決方案
解決方案1
1 2013-10-22 11:54:06
我強烈建議您看一下CSS動畫，它們的性能要好得多，並且易於維護。
在JavaScript中，您所需要做的就是添加或刪除類。
<style>
.my-div {
-webkit-transition-property: top, left;
-moz-transition-property: top, left;
-o-transition-property: top, left;
transition-property: top, left;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
top: 200px;
left: 200px;
}
.initial {
top: 0px;
left: 0px;
}
</style>
<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
setTimeout(function () {
document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
});
</script>
使用JS重新定位Created Div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.