JS-多物体运动2（不同物体做不同的运动）

最新推荐文章于 2020-07-17 21:43:08 发布

Annaluo

最新推荐文章于 2020-07-17 21:43:08 发布

阅读量428

点赞数

分类专栏： JavaScript 文章标签： javascript 布局 html 鼠标中创

本文链接：https://blog.csdn.net/Annaluo/article/details/77683539

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果描述：当鼠标放在第一个Li上时，高度由200Px变成400PX，当鼠标移开高度恢复成之前的；

当鼠标放在第二个LI上时，宽度由100PX变成400PX，当鼠标移开宽度恢复成之前的。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS多物体动画</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid;

        }
    </style>
    <script>
        /* ---用此方法基本功能能实现，但是代码有太多的冗余，所以第二种方法代码更加简化-----
            window.onload = function () {

            var Li1 = document.getElementById('li1');
            var Li2 = document.getElementById('li2');
            Li1.onmouseover =function () {
                startMove(this,400);
            }
            Li1.onmouseout = function () {
                startMove(this,100);
            }
            Li2.onmouseover =function () {
                startMove1(this,400);
            }
            Li2.onmouseout = function () {
                startMove1(this,200);
            }
            }

        function getStyle(obj,attr) {
            //currentStyle针对IE浏览器

            if(obj.currentStyle){
                return obj.currentStyle[sttr];
            }
            //getComputedStyle针对firefox浏览器
            else{
                return getComputedStyle(obj,false)[attr];
            }

        }
        //var timer = null;

        function startMove(obj,iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //var icur = parseInt(getStyle(obj,'width'));
                var icur = parseInt(getStyle(obj,'height'));
                var speed = (iTarget-icur)/8;
                speed = speed >0?Math.ceil(speed):Math.floor(speed);
                if(icur == iTarget){
                    clearInterval(obj.timer);
                }
                else {
                    //obj.style.width = icur+speed+'px';
                    obj.style['height'] = icur+speed+'px';
                }
            },30)
        }

        function startMove1(obj,iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //var icur = parseInt(getStyle(obj,'width'));
                var icur = parseInt(getStyle(obj,'width'));
                var speed = (iTarget-icur)/8;
                speed = speed >0?Math.ceil(speed):Math.floor(speed);
                if(icur == iTarget){
                    clearInterval(obj.timer);
                }
                else {
                    //obj.style.width = icur+speed+'px';
                    obj.style['width'] = icur+speed+'px';
                }
            },30)
        }*/

        //功能完全相同的代码，只需要把不同的参数传进去便好,因此只需要添加一个attr属性，就可以把上面代码简化成为如下
        window.onload = function () {

            var Li1 = document.getElementById('li1');
            var Li2 = document.getElementById('li2');
            Li1.onmouseover =function () {
                startMove(this,'height',400);
            }
            Li1.onmouseout = function () {
                startMove(this,'height',100);
            }
            Li2.onmouseover =function () {
                startMove(this,'width',400);
            }
            Li2.onmouseout = function () {
                startMove(this,'width',200);
            }
        }

        function getStyle(obj,attr) {
            //currentStyle针对IE浏览器

            if(obj.currentStyle){
                return obj.currentStyle[sttr];
            }
            //getComputedStyle针对firefox浏览器
            else{
                return getComputedStyle(obj,false)[attr];
            }

        }
        //var timer = null;

        function startMove(obj,attr,iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {

                var icur = parseInt(getStyle(obj,attr));
                var speed = (iTarget-icur)/8;
                speed = speed >0?Math.ceil(speed):Math.floor(speed);
                if(icur == iTarget){
                    clearInterval(obj.timer);
                }
                else {

                    obj.style[attr] = icur+speed+'px';
                }
            },30)
        }

    </script>
</head>
<body>
<ul>
    <li id="li1"></li>
    <li id="li2"></li>

</ul>
</body>
</html>