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>
js实现上下滑动侧边栏的更多相关文章
- (转)js的左右滑动触屏事件
原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...
- js实现图片滑动显示效果
js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
- 超棒的JS移动设备滑动内容幻灯实现 - Swiper
来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...
- js 简单的滑动4
js 简单的滑动教程(四) 作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...
- js 简单的滑动3
js 简单的滑动教程(三) 作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...
- js 简单的滑动2
js 简单的滑动教程(二) 作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...
- js 简单的滑动1
js 简单的滑动教程(一) 作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...
- 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...
随机推荐
- cmd 利用IE打开网页
"C:\Program Files\Internet Explorer\iexplore.exe" "http://dmsite.chinacloudsites.cn/r ...
- 什么是RFC
通俗的话来说,RFC是关于Internet的几乎所有重要的文字资料,相当于一个Internet的标准. 下面是查询网址:http://www.rfcreader.com/ 一下为百科定义: http: ...
- 关于git的学习
Git是目前世界上最先进的分布式版本控制系统(没有之一)! 由于现在用的还不多,还没有这种体会,但是前人的经验是值得借鉴的,所以我认真的学习了一些关于git的简单操作,现在在这分享一些心得,或者说是为 ...
- choop.php一句话脚本
<?php$_="";$_[+$_]++;$_=$_.""; $___=$_[+""];//A$____=$___;$____++;/ ...
- clickheat简介
装了个wappalyzer,各种感兴趣的去翻各种网站都用了什么框架啊啊啊...然后在qunar.com遇到了clickheat.之前只是听过这类插件,没想到真的在用唉. ClickHeat is a ...
- GitBash上传代码不计入贡献的问题处理
发现最近写的代码,通过GitBash上传到github,但是格子确一个都没亮,今天通过一番检索解决了此问题,特做记录: 通过这篇文章找到了原因所在: GitHub 更新代码到底怎样才算贡献? 通过这篇 ...
- Swift 函数做参数和闭包做参数的一个细节差别
函数作参数,示例为传入一个String和一个添加前缀的函数,返回一个添加完前缀的String: func demo(str:String,addPrefix:(String)->String)- ...
- AngularJs Angular数据类型判断
angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...
- wildfly jobss 同时连接多个数据源
由于需要从一个远程机器取数据.处理后保存到本地数据库处理.用 wildfly datasource 会报: [com.arjuna.ats.arjuna] (default task-6) ARJUN ...
- POJ1741:tree
传送门 时隔一个月再次写点分治,比上一次要深入理解很多了.(虽然代码还是写不熟 模板题,不多说 //POJ 1741 //by Cydiater //2016.9.22 #include <cs ...