CSDN博客

img fableking

网页内容变速滑动~由快至慢

发表于2008/10/1 2:13:00  1007人阅读

分类: Javascript

嘿~节前最后天与客户看了下美工设计的网站页面,其中说到了搜索框的滑动。。具体是这样的,搜索框上半部分是模块搜索表单,底部是相关搜索内容的按钮,点击相关按钮,上半部分的搜索内容也会随之相应滑动到相关的搜索表单内容,但是一听到美工想要在页面上实现这个功能,我就来了兴趣,因为之前没有做过这个功能,一直都是用display直接隐藏显示的,于是今晚抽空分析了下这个滑动的动作实现。。

 

由于之前一直在搞公司新笔记本的vista安装,非常郁闷。。SP1激活不了。。索性不搞了,一直到大概12点的时候才空下时间开始尝试写脚本代码。。。因为这在放假前脑海中就有了思路,所以代码写起来很快。。。(我知道网上类似代码很多,不要鄙视我,我喜欢挑战自己,看看自己能做到什么地步)

 

三下五除二,直接写了一个for循环的脚本实现,打开IE,试了一下,效果还不错,没想到竟然还真的那么简单,但仔细想想,其实效果还不能完全令我满意,因为for循环的滑动是匀速的。。。没劲,这个无法增强视觉以及体验效果。。

然后放到firefox里面试了下(客户要求跨IE、FireFox浏览器),郁闷了,显示效果完全与IE两样。。。直接跳过了for循环的过程,直达我要显示的模块。。这根使用display的效果完全一样嘛~~这可不是我要的效果

以下是我不满意的beta1版代码 = =!

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  5. <title>滑动效果</title>
  6. <script>
  7. function moveSearch(topValue){
  8.     var _top = document.getElementById("searchDiv").scrollTop;
  9.     for(i = 0; i < Math.abs(_top-topValue); i++){
  10.         if(_top < topValue){
  11.             document.getElementById("searchDiv").scrollTop += 1;
  12.         }else{
  13.             document.getElementById("searchDiv").scrollTop -1;
  14.         }
  15.     }
  16. }
  17. </script>
  18. </head>
  19.     <body>
  20.         <div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
  21.             <div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
  22.             <div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
  23.             <div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
  24.         </div>
  25.         <div>选择按钮</div>
  26.         <div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
  27.         <div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
  28.         <div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
  29.         <div id="show"></div>
  30.     </body>
  31. <html>

于是决定做一个变速的滑动效果。。。先快后慢的。。。哼哼~开始考虑使用setTimeout来控制时间。。。。。结果发现。。些微的时间变动根本没有什么效果,而且滑动缓慢到无敌。。虽然我设置的是1毫秒滑动1像素 = =!于是考虑别的办法。。。既然不能控制时间,为什么我就不考虑控制滑动尺寸呢?啊哈哈哈,这个无敌。。还是这个方法好。。于是考虑到了使用减半的尺寸滑动方式,这个也正好是我想要的效果。。。于是写下了下面的代码。。。

beta2版~~~

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  5. <title>滑动效果</title>
  6. <script>
  7. function moveSearch(topValue){
  8.     var _top = document.getElementById("searchDiv").scrollTop;
  9.     if(_top < topValue){
  10.         document.getElementById("searchDiv").scrollTop += Math.round(Math.abs(_top-topValue)/2);
  11.     }else if(_top > topValue){
  12.         document.getElementById("searchDiv").scrollTop -Math.round(Math.abs(_top-topValue)/2);
  13.     }
  14.     if(_top != topValue){
  15.         setTimeout("moveSearch("+topValue+")",1);
  16.     }
  17. }
  18. </script>
  19. </head>
  20.     <body>
  21.         <div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
  22.             <div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
  23.             <div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
  24.             <div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
  25.         </div>
  26.         <div>选择按钮</div>
  27.         <div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
  28.         <div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
  29.         <div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
  30.         <div id="show"></div>
  31.     </body>
  32. <html>

试了一下,效果还不错,哈哈哈,达到我需要的效果了。。。然后开始压力测试。。。这个也需要压力测试?当然了,这里所谓的压力测试就是。。。。。。。。。。加快触发事件的频率,也就是。。。。狂点阿,试试看如果上次事件未执行完,是否会影响下次执行的效果。。。。结果果然不出我所料。。看到网页元素因为我的疯狂点击而在网页上上下颤抖。。。弄得我一阵内疚。。。唉,还是需要改阿。。。。

于是考虑到了加入全局变量来控制setTimeout的变化。。。。

以下是beta3的代码,也就是最终版本的。。。。。目前为止感觉良好,无bug。。。。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  5. <title>滑动效果</title>
  6. <script>
  7. /*
  8. function moveSearch(topValue){
  9.     var _top = document.getElementById("searchDiv").scrollTop;
  10.     for(i = 0; i < Math.abs(_top-topValue); i++){
  11.         if(_top < topValue){
  12.             document.getElementById("searchDiv").scrollTop += 1;
  13.         }else{
  14.             document.getElementById("searchDiv").scrollTop -= 1;
  15.         }
  16.     }
  17. }
  18. */
  19. var moveSearchFlag = false;
  20. var moveSearchTimeAction = null;
  21. function moveSearch(topValue){
  22.     if(moveSearchTimeAction != null){
  23.         clearTimeout(moveSearchTimeAction);
  24.     }
  25.     var _top = document.getElementById("searchDiv").scrollTop;
  26.     if(_top < topValue){
  27.         document.getElementById("searchDiv").scrollTop += Math.round(Math.abs(_top-topValue)/2);
  28.     }else if(_top > topValue){
  29.         document.getElementById("searchDiv").scrollTop -= Math.round(Math.abs(_top-topValue)/2);
  30.     }
  31.     if(_top != topValue){
  32.         moveSearchTimeAction = setTimeout("moveSearch("+topValue+")",30);
  33.     }else{
  34.         moveSearchTimeAction = null;
  35.     }
  36. }
  37. </script>
  38. </head>
  39.     <body>
  40.         <div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
  41.             <div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
  42.             <div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
  43.             <div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
  44.         </div>
  45.         <div>选择按钮</div>
  46.         <div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
  47.         <div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
  48.         <div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
  49.         <div id="show"></div>
  50.     </body>
  51. <html>
0 0

相关博文

我的热门文章

img
取 消
img