时间:2021-07-01 10:21:17 帮助过:20人阅读
window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli var flag = true, r_len = 0, timer = null; cli_on.onclick = function () { if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= -270) { flag = !flag; cli_on.innerHTML = ""; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; cli_on.innerHTML = ""; return false; } else { r_len += 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}
window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli var flag = true, r_len = 0, timer = null; cli_on.onclick = function () { if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= -270) { flag = !flag; cli_on.innerHTML = ""; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; cli_on.innerHTML = ""; return false; } else { r_len += 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。
定位浮动什么的,我会觉得,能少用,就尽量少用,如果用的太多,以后添加功能,更改样式时,都会变得更难。
当然,有时候也不得不用,只要不是把所有的布局,都用float,position这样就好了。
也算是个人习惯。