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

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

原先的代码是这样：

<!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. Linux下创建文本文件（vi/vim命令使用详解）

    vi test.txt 或者 vim test.txt vim是vi的升级版,指令更多,功能更强. 下面是收集的vim用法,当在vim里面要实现退出,首先要做的是按[Esc],然后再输入[:wq] 一 ...

  2. poj1113 凸包

    result=对所有点凸包周长+pi*2*L WA了一次,被Pi的精度坑了 以后注意Pi尽可能搞精确一点.Pi=3.14还是不够用 Code: #include<vector> #incl ...

  3. Codeforces Round #389 Div.2 E. Santa Claus and Tangerines

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  4. Bzoj3524 [Poi2014]Couriers

    Description 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0 ...

  5. 提高效率的Matlab使用方式

    1.花一点时间学习一些提高效率的技巧永远是值得的: 2.总结和记录永远是必要的. Command窗口: Editor窗口: 1.Tab自动补全

  6. Centos下 为Firefox安装Flash插件

    方法一: 直接到官网去下载RPM格式的安装包,下载好后直接 用 rpm -ivh XXXX.rpm 来安装即可. 方法二: 到官网下载tar.gz格式的,自己配置安装: #wget http://fp ...

  7. centos7安装eclipse

    centos7安装eclipse Eclipse是一个集成开发环境(IDE),包含一个基工作区和定制环境的可扩展插件系统.大部分使用 Java 编写,Eclipse 可以用来开发应用程序.通过各种插件 ...

  8. 解决 Ubuntu 无法调节屏幕亮度的问题（转）

    转http://blog.163.com/tym190@126/blog/static/8776005920143192412477/ 终端输入代码:     在打开文件中找到 GRUB_CMDLIN ...

  9. 关于markdown的学习

    标题 标题(一个等号) 小标题 深层标题 深层标题2 深层标题6 深层标题 左边一个空格 深层标题 左边两个空格 此处省略很多字 左边有回车 一个空格 两个空格 三个空格 十个空格 字体属性:斜体.加 ...

  10. 我的WCF Data Service 系列 （一、为什么要有WCF Data Service）

    开篇先说两名题外话, 在博问上,经常看到有个问性能问题,比如Entity Framework的性能行不行啊之类的. 其实这个行不行,关键还是看对象,一夜家族的老七可能勉强吃点蓝片片,也就行了,可真要让 ...