例子：滑动效果

最新推荐文章于 2025-08-14 17:31:00 发布

转载最新推荐文章于 2025-08-14 17:31:00 发布 · 76 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/l5580/p/5909236.html

文章标签：

本文介绍了一种使用CSS和JavaScript实现动态调整网页布局的方法。通过点击按钮触发JavaScript函数，该函数会逐步改变左右两个div元素的宽度，同时移动按钮的位置。这种布局调整方式适用于响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</div>

function Bian()

{

　　Dong();

　　}

　　//改变大小和位置

　　function Dong()

　　{

　　var d1 = document.getElementById("left");

　　 var d2 = document.getElementById("right");

　　var btn = document.getElementById("btn");

　　//左侧DIV变宽

　　var yskd1 = d1.style.width;

　　var w1 = yskd1.substr(0,yskd1.length-2);

　　var w1 = parseInt(w1)+2;

　　d1.style.width = w1+"px";

　　//右侧DIV变窄

　　var yskd2 = d2.style.width;

　　var w2 = yskd2.substr(0,yskd2.length-2);

　　var w2 = parseInt(w2)-2;

　　d2.style.width = w2+"px";

　　//将按钮移动

　　 var ysjl = btn.style.left;

　　var w3 = ysjl.substr(0,ysjl.length-2);

　　 var w3 = parseInt(w3)+2;

　　 btn.style.left = w3+"px";

　　 if(w2>200)

　　{

//自己调自己

　　window.setTimeout("Dong()",1);

　　}

</script>

转载于:https://www.cnblogs.com/l5580/p/5909236.html