嘿~节前最后天与客户看了下美工设计的网站页面,其中说到了搜索框的滑动。。具体是这样的,搜索框上半部分是模块搜索表单,底部是相关搜索内容的按钮,点击相关按钮,上半部分的搜索内容也会随之相应滑动到相关的搜索表单内容,但是一听到美工想要在页面上实现这个功能,我就来了兴趣,因为之前没有做过这个功能,一直都是用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" οnclick="moveSearch(0)"/></div>
- <div><input type="button" value="look 2" οnclick="moveSearch(400)"/></div>
- <div><input type="button" value="look 3" οnclick="moveSearch(800)"/></div>
- <div id="show"></div>
- </body>
- <html>