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

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

原先的代码是这样：

<!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. cmd 利用IE打开网页

    "C:\Program Files\Internet Explorer\iexplore.exe" "http://dmsite.chinacloudsites.cn/r ...

  2. 什么是RFC

    通俗的话来说,RFC是关于Internet的几乎所有重要的文字资料,相当于一个Internet的标准. 下面是查询网址:http://www.rfcreader.com/ 一下为百科定义: http: ...

  3. 关于git的学习

    Git是目前世界上最先进的分布式版本控制系统(没有之一)! 由于现在用的还不多,还没有这种体会,但是前人的经验是值得借鉴的,所以我认真的学习了一些关于git的简单操作,现在在这分享一些心得,或者说是为 ...

  4. choop.php一句话脚本

    <?php$_="";$_[+$_]++;$_=$_.""; $___=$_[+""];//A$____=$___;$____++;/ ...

  5. clickheat简介

    装了个wappalyzer,各种感兴趣的去翻各种网站都用了什么框架啊啊啊...然后在qunar.com遇到了clickheat.之前只是听过这类插件,没想到真的在用唉. ClickHeat is a ...

  6. GitBash上传代码不计入贡献的问题处理

    发现最近写的代码,通过GitBash上传到github,但是格子确一个都没亮,今天通过一番检索解决了此问题,特做记录: 通过这篇文章找到了原因所在: GitHub 更新代码到底怎样才算贡献? 通过这篇 ...

  7. Swift 函数做参数和闭包做参数的一个细节差别

    函数作参数,示例为传入一个String和一个添加前缀的函数,返回一个添加完前缀的String: func demo(str:String,addPrefix:(String)->String)- ...

  8. AngularJs Angular数据类型判断

    angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...

  9. wildfly jobss 同时连接多个数据源

    由于需要从一个远程机器取数据.处理后保存到本地数据库处理.用 wildfly datasource 会报: [com.arjuna.ats.arjuna] (default task-6) ARJUN ...

  10. POJ1741:tree

    传送门 时隔一个月再次写点分治,比上一次要深入理解很多了.(虽然代码还是写不熟 模板题,不多说 //POJ 1741 //by Cydiater //2016.9.22 #include <cs ...