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>
View Code
复制代码

 

posted @   革新  阅读(3612)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示