JS实现动画中的布局转换
作者:aiguangyuan 发布时间:2023-10-14 15:58:04
标签: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>
来源:https://blog.csdn.net/weixin_40629244/article/details/99684678
0
投稿
猜你喜欢
- 前文主要纠正title用法上的几点误区,其实除链接和表单的常规标签用法。在内容组织方面还有大潜力待发掘,比如写网志经常会有针对词、短语说明的
- “网页设计三剑客”可能很多新同学都没听说过,因为缔造神话的公司已经快销声匿迹。“网页设计三剑客”是Macromedia公司旗下Dreamwe
- 如果是感应触发.就选onmouseover如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应
- 前端开发部门在壮大,人员在增加,技术在进步。CSSer虽然不能代表前端开发团队,但CSSer是前端开发中非常重要的组成部分。一、文档写程序的
- 第一种:获取不带后缀的文件名,直接上代码:就是直接用basename()函数就可以返回路径中的文件名部分,其语法是“basename(pat
- 在windows 2003下,在运行web应用程序的时候出现一下错误: 服务器无法处理请求,-->对路径“C:/temp/mytest.tx
- 最近要做一个网站需要用到天气预报,本来是想找到API,自己写一个自己的天气预报小程序的,没有成功,只好去找现成的代码调用。经过测
- JS获取网页中HTML元素的几种方法分析:getElementById getElementsByName getElementsByTag
- 虽然我只是把豆瓣当作一个纪录工具来用,纪录下自己看过的电影、听过的音乐、读过的书籍,我几乎不关注豆瓣上的任何影评、乐评、音衣服之类的内容,但
- 以下插件是我在项目中经常使用的jQuery插件,不见得是最好的,但是我目前接触到的jQuery插件中最适合我的。01. jQuery.Fle
- 内容摘要:这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单。首先来分析一下日期下拉菜
- 说实话,对于移除这个旧有功能对于我来说,我是欢心鼓舞的。因为我在开发和应用当中一向不用expression来处理,虽然它确实是非常方便,比如
- 你是否发现,在浩如烟海的应用程序堆里,具有漂亮图标和清爽名字的 App 更容易被用户喜爱。作为开发者,面对这自己的作品,能否自问一句:“从图
- Brendan Eich于1995年在Netscape发明了JavaScript语言,这个语言在过去的一些年里曾是一个最被误解的语言,随着A
- ul: unordered lists ol: ordered lists li: Listsol 有序列表:<ol>
- js的成员和方法好象没有private和public之分,列一下public的成员和方法成员:name 控件的名字,既这个控件的变量名(必选
- 前言在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信,考虑下面这样的场景:我想要点击任意一个专辑卡并通知主界面跳转到专辑界面,那么
- 下面基础的解释一下这错误: 1:本质上的错误: object a;//a是Null对象 protected void Page_Load(o
- 网页版面布局的方法及技巧,版面指的是浏览器看到的完整的一个页面(可以包含框架和层)。因为每个人的显示器分辨率不同,所以同一个页面的大小可能出
- 转发时请保留此声明信息,这段声明不并会影响你的速度! @author: