- PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
- 无标题文档
- * {
- margin: 0px auto;
- padding: 0px
- }#wai {
- width: 100 % ;
- height: 500px;
- }#left {
- height: 500px;
- background - color: #63C;
- float: left
- }#right {
- height: 500px;
- background - color: #FC3;
- float: left
- }#anniu {
- width: 50px;
- height: 50px;
- background - color: #F30;
- position: absolute;
- top: 225px;
- z - index: 10;
- }#anniu: hover {
- cursor: pointer
- }
- var id;
- function hua() {
- id = window.setInterval("dong()", 10);
- }
- //滑动的方法,调一次滑动3px
- function dong() {
- //改蓝色的宽度 200px
- var zuo = document.getElementById("left");
- kd = zuo.style.width;
- if (parseInt(kd.substr(0, kd.length - 2)) >= 800) {
- window.clearInterval(id);
- return;
- }
- kd = parseInt(kd.substr(0, kd.length - 2)) + 3;
- zuo.style.width = kd + "px";
- //改黄色的宽度
- var you = document.getElementById("right");
- ykd = you.style.width;
- ykd = parseInt(ykd.substr(0, ykd.length - 2)) - 3;
- you.style.width = ykd + "px";
- //改红色的left
- var hong = document.getElementById("anniu");
- hleft = hong.style.left;
- hleft = parseInt(hleft.substr(0, hleft.length - 2)) + 3;
- hong.style.left = hleft + "px";
- }
来源: http://www.bubuko.com/infodetail-1978001.html