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

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

原先的代码是这样：

<!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. Jenkins使用FTP进行一键部署及回滚（Windows）

    前提条件: 1.必须有两台服务器,一个是生产环境,另一个是测试环境. 2.两台服务器上都必须安装了Jenkins. 3.其中,生产环境上的Jenkins已经开通的CLI的权限(Windows参考:ht ...

  2. PHP的几个常用加密函数

    在php的开发过程中,常常需要对部分数据(如用户密码)进行加密 一.加密类型: 1.单向散列加密 就是把任意长度的信息进行散列计算,得到固定长度的输出,这个散列计算过程是单向的,即不能对固定长度的输出 ...

  3. CodeForces 125E MST Company

    E. MST Company time limit per test 8 seconds memory limit per test 256 megabytes input standard inpu ...

  4. Android四大组件

    Activity 概念 活动是一种可以包含用户界面的组件,主要用于和用户交互.一个应用程序可以包含零个或多个活动. 基本用法 手动创建活动 1. 创建或加载布局 2. 在AndroidManifest ...

  5. win7、win8上SaveFileDialog窗口跳不出的问题

    xp上做的开一个线程 线程中数据以Excel形式保存到指定文件中的程序  放到win7 win8上都不跳出保存的对话框? 解决: 在win7.win8上都要对线程  在线程启动前设置其单元状态.设置为 ...

  6. iOS “智慧气象”APP中用到的第三方框架汇总

    “智慧气象”是我最近在公司接手的项目,已经完成最新版本的更新并上架,在此分享下其中用到的第三方框架的使用. 应用地址:APP商店搜索“智慧气象” MJRefresh(下拉刷新)业界知名下拉刷新框架就不 ...

  7. Windows8远程桌面CentOS 6.5

    概述: 在CentOS上安装vncserver和Windows8上安装VNC Viewer,从而可以在Windows8远程桌面到CentOS 6.5 1. 在CentOS上安装vncserver 1. ...

  8. Ubuntu 使用笔记

    持续更新 从前使用sudo apt update更新时, 发现软件源是cn.archive.ubuntu.com. 最近在system setting 中将软件源改成了archive.ubuntu.c ...

  9. AngularJs $sce 和 $sceDelegate 上下文转义

    $sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...

  10. java连接数据源-读取tomcat数据源配置

    读取数据源配置,获取连接 1.配置数据源 D:\apache-tomcat-7.0.70\conf\context.xml <Resource name="jdbc/news" ...