js实现上下滑动侧边栏

时间：2021-07-15 07:53:38

给一个原先的电子商务网站做修改，客户说想将原先上下滑动侧边栏改的更加人性化，希望将原先匀速滑动的侧边栏改成变速运动的侧边栏，在到达目的地之前速度越变越慢。

原先一开始的时候，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>

<style>

#testDiv1 { width:225px;height:97px;position:absolute; right:0}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>上下滑动侧边栏</title>

<script type="text/javascript">

window.onload = window.onscroll = function () {

    var sDiv = document.getElementById('testDiv1');

    // document.body.scrollTop   兼容谷歌浏览器

    //  document.documentElement.scrollTop  兼容IE浏览器

    //滚动点离浏览器顶部的距离

    var varTop = document.documentElement.scrollTop || document.body.scrollTop;

    //给DIV的高赋值

    sDiv.style.top = varTop + (document.documentElement.clientHeight - sDiv.offsetHeight) / 2 + 'px';

}

</script>

</head>

<body style="height:2000px;">

<div id="testDiv1"><img src="kf.jpg" alt="" /></div>

</body>

</html>

只是让div立马居中。

要让div在到达终点前，变速地运动到终点，而且速度越来越慢，就得让sDiv.style.top的值的变化率一点一点地变慢。

于是增加了代码：

<!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>

<style>

#testDiv1 { width:225px;height:97px;position:absolute; right:0}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>上下滑动侧边栏</title>

<script type="text/javascript">

window.onload = window.onscroll = function () {

    var sDiv = document.getElementById('testDiv1');

    // document.body.scrollTop   兼容谷歌浏览器

    //  document.documentElement.scrollTop  兼容IE浏览器

    //滚动点离浏览器顶部的距离

    var varTop=document.documentElement.scrollTop||document.body.scrollTop;

    //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';

    var t = varTop + (document.documentElement.clientHeight - sDiv.offsetHeight) / 2;

    //给DIV的高赋值

    //document.documentElement.clientHeight可见区域的高度

    //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';

    //让速度发生变化

    startMove(parseInt(t),7);

}

var varTimer = null;

function startMove(destination,speed) {

    var sDiv = document.getElementById('testDiv1');

    //开启一个定时器

    clearInterval(varTimer);

    varTimer = setInterval(function () {

      //div一开始离目标的距离除以speed  div移动的速度  div距离越近  速度越小

        var varSpeed = (destination - sDiv.offsetTop) / speed;

        //Round是四舍五入 ceil向上取整。。floor向下取整

        varSpeed = varSpeed > 0 ? Math.ceil(varSpeed) : Math.floor(varSpeed);

        //到达目的地  清除定时器

        if (sDiv.offsetTop == destination) {

            clearInterval(varTimer);

        }

        else {

        //移动

            sDiv.style.top = sDiv.offsetTop + varSpeed + 'px';

        }

    }, 30);

}

</script>

</head>

<body style="height:3000px;">

<div id="testDiv1"><img src="kf.jpg" alt="" /></div>

</body>

</html>

相关文章