JS实现动画中的布局转换
更新时间：2021年08月20日 15:01:51 作者：aiguangyuan
这篇文章主要为大家详细介绍了JS实现动画中的布局转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在用JS编写动画的时候，经常用会到布局转换，即在运动前将相对定位转为绝对定位，然后执行动画函数。下面给大家分享一个运用原生JS实现的布局转换的Demo，效果如下:
以下是代码实现，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现动画中的布局转换</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';
}
// 必需要用两个循环
for (i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
//第一次循环中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实现下班倒计时效果的方法,涉及javascript倒计时效果及桌面提示效果的实现技巧,具有一定参考借鉴价值2015-07-07
对于订单，想必大家并不陌生吧，下为大家介绍下使用js实现的订单，感兴趣的朋友可以参考下2013-12-12
继续上一部分，我们要看一下颜色。火狐好像不管三七二十一都会转变为rgb格式，不过我们通常比较习惯的是hex格式。这就用到以下两函数。2010-01-01
这篇文章主要介绍了简单的JS轮播图实现方法，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-07-07
这篇文章主要为大家详细介绍了javascript实现列表切换效果的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了基于javascript实现全屏漂浮广告，光标悬浮广告停止移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
为了让自定义选择选择出的节点集合尽可能接近原生API选出的结果，我们往往要对结果集进行排序，此顺序当然是从上到下，从左到右的DOM树顺序。2011-01-01
这篇文章主要介绍了JavaScript闭包函数访问外部变量的方法,本文使用匿名函数来实现在闭包中访问外部变量,需要的朋友可以参考下2014-08-08
这篇文章主要给大家介绍了关于JS操作字符串的一些常见内置方法,JavaScript中有许多常用的数组和字符串操作函数,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
对于html中的一些元素注册事件的方式有多种，接下来将为大家详细介绍下，大家可以测试并对比下根据自己的习惯使用哪一种方式2013-03-03
最新评论