JS實現(xiàn)動畫中的布局轉換
更新時間：2021年08月20日 15:01:51 作者：aiguangyuan
這篇文章主要為大家詳細介紹了JS實現(xiàn)動畫中的布局轉換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在用JS編寫動畫的時候，經常用會到布局轉換，即在運動前將相對定位轉為絕對定位，然后執(zhí)行動畫函數。下面給大家分享一個運用原生JS實現(xiàn)的布局轉換的Demo，效果如下:
以下是代碼實現(xiàn)，歡迎大家復制粘貼及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現(xiàn)動畫中的布局轉換</title>
<style>
* {
margin: 0;
padding: 0;
}
#ul1 {
width: 366px;
margin: 0 auto;
position: relative;
}
#ul1 li {
list-style: none;
width: 100px;
height: 100px;
background: #CCC;
border: 1px solid black;
float: left;
margin: 10px;
z-index: 1;
}
</style>
<!-- 運動框架 -->
<script>
// 獲取指定樣式的值
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
};
// 運動函數
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true;
for (var attr in json) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}
</script>
<!-- 添加事件 -->
<script>
window.onload = function () {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iMinZindex = 2;
var i = 0;
// 1.布局轉換
for (i = 0; i < aLi.length; i++) {
//aLi[i].innerHTML='left:'+aLi[i].offsetLeft+', top:'+aLi[i].offsetTop;
aLi[i].style.left = aLi[i].offsetLeft + 'px';
aLi[i].style.top = aLi[i].offsetTop + 'px';
}
// 必需要用兩個循環(huán)
for (i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
//第一次循環(huán)中offset值已經計算了原有的margin值，所以此處要清除
aLi[i].style.margin = '0';
}
// 2.加事件
for (i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function () {
//讓當前zIndex不斷的增加，防止堆疊
this.style.zIndex = iMinZindex++;
startMove(this, {
width: 200,
height: 200,
marginLeft: -50,
marginTop: -50
});
};
aLi[i].onmouseout = function () {
startMove(this, {
width: 100,
height: 100,
marginLeft: 0,
marginTop: 0
});
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript實現(xiàn)下班倒計時效果的方法(可桌面通知)
這篇文章主要介紹了javascript實現(xiàn)下班倒計時效果的方法,涉及javascript倒計時效果及桌面提示效果的實現(xiàn)技巧,具有一定參考借鑒價值2015-07-07
對于訂單，想必大家并不陌生吧，下為大家介紹下使用js實現(xiàn)的訂單，感興趣的朋友可以參考下2013-12-12
繼續(xù)上一部分，我們要看一下顏色?；鸷孟癫还苋叨欢紩D變?yōu)閞gb格式，不過我們通常比較習慣的是hex格式。這就用到以下兩函數。2010-01-01
這篇文章主要介紹了簡單的JS輪播圖實現(xiàn)方法，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)列表切換效果的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了基于javascript實現(xiàn)全屏漂浮廣告，光標懸浮廣告停止移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
javascript 節(jié)點排序實現(xiàn)代碼
為了讓自定義選擇選擇出的節(jié)點集合盡可能接近原生API選出的結果，我們往往要對結果集進行排序，此順序當然是從上到下，從左到右的DOM樹順序。2011-01-01
這篇文章主要介紹了JavaScript閉包函數訪問外部變量的方法,本文使用匿名函數來實現(xiàn)在閉包中訪問外部變量,需要的朋友可以參考下2014-08-08
這篇文章主要給大家介紹了關于JS操作字符串的一些常見內置方法,JavaScript中有許多常用的數組和字符串操作函數,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
對于html中的一些元素注冊事件的方式有多種，接下來將為大家詳細介紹下，大家可以測試并對比下根據自己的習慣使用哪一種方式2013-03-03