动态V字布局

来源：互联网发布：网络上认识了你歌曲编辑：程序博客网时间：2024/04/29 07:21

先瞄一眼动态图，点击按钮的效果：

这里写图片描述

 废话不多说，开始鲁代码

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{margin:0;padding:0;}div {width:100px;height:100px;line-height:100px;border:1px solid black;position:absolute;left:0;top:0;text-align:center;font-size:30px;}</style><script>window.onload = function () {    var oBtn = document.getElementById('btn1');    var aDiv = document.getElementsByTagName('div');    // 自动添加五个div    for ( var i = 0; i < 5; i++ ) {        var newDiv = document.createElement('div');        newDiv.innerHTML = i;        newDiv.style.background = 'red';        newDiv.style.display = 'none';        document.body.appendChild(newDiv);    }    var len = aDiv.length;    var fnName = [toTop,toRight,toBottom,toLeft];    var index = 0; // 0,1,2,3 => 上 右 下 左    // 点击按钮 依次为上 右 下 左    oBtn.onclick = function () {        fnName[index++]();        if (index === 4) index = 0;    }    function toTop() {        // 上 => ^        for ( var j = 0; j < len; j++ ) {            aDiv[j].style.left = j * 100 + 100 + 'px';            aDiv[j].style.top = 100 * (j < 3 ? 2 - j : j - 2) + 100 + 'px';            aDiv[j].style.display = 'block';        }    }    function toRight() {        // 上 => >        for ( var j = 0; j < len; j++ ) {            aDiv[j].style.top = j * 100 + 100 + 'px';            aDiv[j].style.left = 100 * (j < 3 ? j : 4 - j) + 100 + 'px';        }    }    function toBottom() {        // 上 => v        for ( var j = 0; j < len; j++ ) {            aDiv[j].style.left = j * 100 + 100 + 'px';            aDiv[j].style.top = 100 * (j < 3 ? j : 4 - j) + 100 + 'px';        }    }    function toLeft() {        // 上 => <        for ( var j = 0; j < len; j++ ) {            aDiv[j].style.top = j * 100 + 100 + 'px';            aDiv[j].style.left = 100 * (j < 3 ? 2 - j : j - 2) + 100 + 'px';        }    }}</script></head><body><input type="button" id="btn1" value="按钮"/></body></html>

0 0