js相关小实例——滑动效果

最新推荐文章于 2024-08-04 16:33:59 发布

djhzn42662

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量81

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/binbinyouli123/p/6534742.html

版权

<!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 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" οnclick="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>
</body>
</html>

运行结果：

点击红色区域后：

最后结果：

转载于:https://www.cnblogs.com/binbinyouli123/p/6534742.html

djhzn42662

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js相关小实例——滑动效果

<!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>...
复制链接

扫一扫