大概就是几个块  摸到那个元素最高  两边高度递减 用什么算法 求大神指点

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            div{
                width: 100px;
                height: 100px;
                display: inline-block;
                margin: 0 10px;
                transition:height 0.5s linear 0s;
            }
            div:nth-of-type(2n){
                background-color: #ff0000;
            }
            div:nth-of-type(2n+1){
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <script>
        function createDiv(){
            const arr=Array.from({length:7},()=>
                    document.body.appendChild(document.createElement('div')));
            return arr;
        }
        function run(){
            const arr=createDiv();
            document.body.onmouseover=function(e){
                var target= e.target;
                var index=arr.indexOf(target);
                arr[index].style.height='400px';
                if(index!=-1){
                    var max=Math.max(arr.length-index,index);
                    for(var i=1;i<=max;i++){
                        arr[index+i]&&(arr[index+i].style.height=(400-50*i)+'px');
                        arr[index-i]&&(arr[index-i].style.height=(400-50*i)+'px');
                    }
                }
            }
        }
        run();
    </script>
    </body>
    </html>