码迷,mamicode.com
首页 > Web开发 > 详细

js实例6滑动按钮

时间:2016-12-16 22:13:15      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:type   cursor   height   point   osi   bst   pointer   style   dex   

<style type="text/css">
*{ 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}
</style>
</head>

<body>

<div id="wai">
<div id="left" style="width:200px"></div>
<div id="right" style="width:800px"></div>
</div>

<div id="anniu" style="left:175px" onclick="hua()"></div>

<script type="text/javascript">

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";


}

</script>

js实例6滑动按钮

标签:type   cursor   height   point   osi   bst   pointer   style   dex   

原文地址:http://www.cnblogs.com/qdlj/p/6188326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!