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

原先一开始的时候，，这个图片是硬生生地到达可视区的中点，看得有点愣愣傻傻的。

原先的代码是这样：

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

js实现上下滑动侧边栏的更多相关文章

  1. (转)js的左右滑动触屏事件

    原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...

  2. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

  3. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  4. 超棒的JS移动设备滑动内容幻灯实现 - Swiper

    来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...

  5. js 简单的滑动4

    js 简单的滑动教程(四)   作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...

  6. js 简单的滑动3

    js 简单的滑动教程(三)   作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...

  7. js 简单的滑动2

    js 简单的滑动教程(二)   作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...

  8. js 简单的滑动1

    js 简单的滑动教程(一)   作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...

  9. 写一个js向左滑动删除 交互特效的插件——Html5 touchmove

    需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

随机推荐

  1. bzoj1104: [POI2007]洪水pow

    #include <iostream> #include <cstdio> #include <cmath> #include <cstring> #i ...

  2. Azure 数据库中文乱码的问题

    1,创建数据库的时候记得选择中文的 2,更新中文的时候记得加上N

  3. vijos2001 xor-sigma

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. TeamViewer11的安全设置

    一.关闭随机密码,使用固定的复杂密码 二.关闭文件共享传输 三.关闭在线状态,关闭会议功能

  5. C#制作验证码

    void CodeImage(string code) { if (code == null || code.Trim() == string.Empty) return; System.Drawin ...

  6. visual studio 2010 C#编程时 没有.NET framework 2.0目标框架的解决办法

    解决办法是安装Framework .NET 3.5 Sp1 因为visual studio 2010是依赖.NET Framework 3.5 Sp1来识别其它版本的.NEt framework的. ...

  7. 找女神要QQ号码

    引言 我们组来了个美女程序员,我心里窃喜,哈哈这下机会来了.我在想怎么下手呢?好吧,还是从QQ号码开始,找到女神要到QQ号,哈哈,我真是个天才~~~ 是这样子滴 想法是美好的,现实是残酷的,找女神要Q ...

  8. vi命令大全

    参考 http://www.cnblogs.com/88999660/articles/1581524.html 最近要用到linux和shell脚本,所以多学习下,反正没什么坏处 在linux里面, ...

  9. Linux nginx 配置 location 语法 正则表达式

    location语法:location [=|~|~*|^~] /uri/ { - }默认:否上下文:server这个指令随URL不同而接受不同的结构.你可以配置使用常规字符串和正则表达式.如果使用正 ...

  10. NOIp 0924 水题记

    这场貌似是gcd专场? 第一题很有意思,模拟gcd的过程即可. //0924 candy //by Cydiater //2016.9.24 #include <iostream> #in ...