网页内容变速滑动~由快至慢
嘿~节前最后天与客户看了下美工设计的网站页面，其中说到了搜索框的滑动。。具体是这样的，搜索框上半部分是模块搜索表单，底部是相关搜索内容的按钮，点击相关按钮，上半部分的搜索内容也会随之相应滑动到相关的搜索表单内容，但是一听到美工想要在页面上实现这个功能，我就来了兴趣，因为之前没有做过这个功能，一直都是用display直接隐藏显示的，于是今晚抽空分析了下这个滑动的动作实现。。
由于之前一直在搞公司新笔记本的vista安装，非常郁闷。。SP1激活不了。。索性不搞了，一直到大概12点的时候才空下时间开始尝试写脚本代码。。。因为这在放假前脑海中就有了思路，所以代码写起来很快。。。（我知道网上类似代码很多，不要鄙视我，我喜欢挑战自己，看看自己能做到什么地步）
三下五除二，直接写了一个for循环的脚本实现，打开IE，试了一下，效果还不错，没想到竟然还真的那么简单，但仔细想想，其实效果还不能完全令我满意，因为for循环的滑动是匀速的。。。没劲，这个无法增强视觉以及体验效果。。
然后放到firefox里面试了下（客户要求跨IE、FireFox浏览器），郁闷了，显示效果完全与IE两样。。。直接跳过了for循环的过程，直达我要显示的模块。。这根使用display的效果完全一样嘛~~这可不是我要的效果
以下是我不满意的beta1版代码 = =！
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑动效果</title>
<script>
function moveSearch(topValue){
var _top = document.getElementById("searchDiv").scrollTop;
for(i = 0; i < Math.abs(_top-topValue); i++){
if(_top < topValue){
document.getElementById("searchDiv").scrollTop += 1;
}else{
document.getElementById("searchDiv").scrollTop -= 1;
}
}
}
</script>
</head>
<body>
<div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
<div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
<div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
<div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
</div>
<div>选择按钮</div>
<div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
<div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
<div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
<div id="show"></div>
</body>
<html>
于是决定做一个变速的滑动效果。。。先快后慢的。。。哼哼~开始考虑使用setTimeout来控制时间。。。。。结果发现。。些微的时间变动根本没有什么效果，而且滑动缓慢到无敌。。虽然我设置的是1毫秒滑动1像素 = =！于是考虑别的办法。。。既然不能控制时间，为什么我就不考虑控制滑动尺寸呢？啊哈哈哈，这个无敌。。还是这个方法好。。于是考虑到了使用减半的尺寸滑动方式，这个也正好是我想要的效果。。。于是写下了下面的代码。。。
beta2版~~~
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑动效果</title>
<script>
function moveSearch(topValue){
var _top = document.getElementById("searchDiv").scrollTop;
if(_top < topValue){
document.getElementById("searchDiv").scrollTop += Math.round(Math.abs(_top-topValue)/2);
}else if(_top > topValue){
document.getElementById("searchDiv").scrollTop -= Math.round(Math.abs(_top-topValue)/2);
}
if(_top != topValue){
setTimeout("moveSearch("+topValue+")",1);
}
}
</script>
</head>
<body>
<div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
<div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
<div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
<div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
</div>
<div>选择按钮</div>
<div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
<div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
<div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
<div id="show"></div>
</body>
<html>
试了一下，效果还不错，哈哈哈，达到我需要的效果了。。。然后开始压力测试。。。这个也需要压力测试？当然了，这里所谓的压力测试就是。。。。。。。。。。加快触发事件的频率，也就是。。。。狂点阿，试试看如果上次事件未执行完，是否会影响下次执行的效果。。。。结果果然不出我所料。。看到网页元素因为我的疯狂点击而在网页上上下颤抖。。。弄得我一阵内疚。。。唉，还是需要改阿。。。。
于是考虑到了加入全局变量来控制setTimeout的变化。。。。
以下是beta3的代码，也就是最终版本的。。。。。目前为止感觉良好，无bug。。。。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑动效果</title>
<script>
/*
function moveSearch(topValue){
var _top = document.getElementById("searchDiv").scrollTop;
for(i = 0; i < Math.abs(_top-topValue); i++){
if(_top < topValue){
document.getElementById("searchDiv").scrollTop += 1;
}else{
document.getElementById("searchDiv").scrollTop -= 1;
}
}
}
*/
var moveSearchFlag = false;
var moveSearchTimeAction = null;
function moveSearch(topValue){
if(moveSearchTimeAction != null){
clearTimeout(moveSearchTimeAction);
}
var _top = document.getElementById("searchDiv").scrollTop;
if(_top < topValue){
document.getElementById("searchDiv").scrollTop += Math.round(Math.abs(_top-topValue)/2);
}else if(_top > topValue){
document.getElementById("searchDiv").scrollTop -= Math.round(Math.abs(_top-topValue)/2);
}
if(_top != topValue){
moveSearchTimeAction = setTimeout("moveSearch("+topValue+")",30);
}else{
moveSearchTimeAction = null;
}
}
</script>
</head>
<body>
<div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
<div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
<div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
<div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
</div>
<div>选择按钮</div>
<div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
<div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
<div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
<div id="show"></div>
</body>
<html>