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

最新推荐文章于 2023-02-07 22:01:58 发布

fableking

最新推荐文章于 2023-02-07 22:01:58 发布

阅读量1.3k

点赞数

分类专栏： Javascript 文章标签： border button firefox 测试脚本 null

本文链接：https://blog.csdn.net/fableking/article/details/3006325

版权

Javascript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

嘿~节前最后天与客户看了下美工设计的网站页面，其中说到了搜索框的滑动。。具体是这样的，搜索框上半部分是模块搜索表单，底部是相关搜索内容的按钮，点击相关按钮，上半部分的搜索内容也会随之相应滑动到相关的搜索表单内容，但是一听到美工想要在页面上实现这个功能，我就来了兴趣，因为之前没有做过这个功能，一直都是用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>
 

fableking

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页内容变速滑动~由快至慢

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

扫一扫

专栏目录