首页 » JavaScript » JS-多物体运动(所有物体做相同的运动)

JS-多物体运动(所有物体做相同的运动)

原文 http://blog.csdn.net/Annaluo/article/details/77683331

2017-08-29 19:20:04阅读(547)

效果描述:当鼠标放上去li的高度由200PX变成400PX,(所有的li变化相同,都是高度的变化)


JS-多<a href=物体运动(所有物体做相同的运动)" src="http://img.blog.csdn.net/20170829172345276?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW5uYWx1bw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">


代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS多物体动画2</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 aLi = document.getElementsByTagName('li');
            for(var i = 0;i<aLi.length;i++){
                aLi[i].timer = null;
                aLi[i].onmouseover = function () {
                    startMove(this,400);
                }
                aLi[i].onmouseout = function (){
                    startMove(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)
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>


最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹

天天可领!最高99块!土豪站长12月发红包啦!

关闭
支付宝红包