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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实现网格列表布局转换方法

    Vue.js实现网格列表布局转换方法

    实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&quo

  • JS实现动画中的布局转换

    JS实现动画中的布局转换

    在用JS编写动画的时候,经常用会到布局转换,即在运动前将相对定位转为绝对定位,然后执行动画函数.下面给大家分享一个运用原生JS实现的布局转换的Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • JS抛物线动画实例制作

    JS抛物线动画实例制作

    在做无人便利小程序的项目中,某一天产品说要像某产商产品学习,给添加购物车增加抛物线小球动画.好吧,产品你最大,做! 先给大家看下效果图 分析 这种不固定起始位置的动画,自然不能用 gif 图,所以只能用原生代码实现 那我们有什么工具来实现动画呢? 小程序提供了 JS API createAnimation 来创建动画 CSS animation 工具有了,我们再看一下什么是抛物线. 这里我们只讨论水平抛物线,水平抛物线从数学原理上来说就是[水平匀速.垂直加速的运动],转换成代码层面就是在动画效果

  • JS对象与json字符串格式转换实例

    本文实例讲述了JS对象与json字符串格式转换的实现方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title></title>     <script type="text/javascript"&g

  • js弹性势能动画之抛物线运动实例详解

    抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动 在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-

  • JS清除字符串中重复值的实现方法

    本文实例讲述了JS清除字符串中重复值的实现方法.分享给大家供大家参考,具体如下: /// <summary> /// 清除字符串中重复的值 /// </summary> /// <param name="Text">字符串</param> /// <param name="Label">标签(如:| ,)</param> function FilterRepeatStr(Text, Label)

  • js运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

  • js模仿php中strtotime()与date()函数实现方法

    本文实例讲述了js模仿php中strtotime()与date()函数实现方法.分享给大家供大家参考.具体如下: 在js中没有像php中strtotime()与date()函数,可直接转换时间戳,下面我们来自定一个函数来实现js中具体有时间戳转换的功能. function datetime_to_unix(datetime){ var tmp_datetime = datetime.replace(/:/g,'-'); tmp_datetime = tmp_datetime.replace(/

  • 浅谈jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组

    浅谈jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组

    由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大多是一些纯html和js,很少用到jstl的一堆东西,后端也仅仅处理一些前端的post.get请求或页面跳转,无须以往繁琐的xml路径映射和filter过滤. 不过有时也会用到servlet作用域中的一些东西,比如某个固定的值.上下文路径等等~,不过这些东西大多数也仅限于取值而不是设置值(或对象),所以sun给了一个非常简洁的取值方式:C标签! 下面将简述下C标签的一些

  • 原生js和jquery中有关透明度设置的相关问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置,

  • JS在浏览器中解析Base64编码图像

    JS在浏览器中解析Base64编码图像

    上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝.下载而不用担心信息会缺失.这项技术也在email邮件中被广泛使用. 浏览器对Base64的支持 图像是最经常被使用的一种二进制文件.而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持.因此图形信息可以以下面的形式呈现在页面中. Java代码 <img src="data:im

随机推荐