首页 新闻 搜索 专区 学院

网页实现左右滑动效果

0
悬赏园豆:100 [待解决问题]

我想要实现一个左右可以滑动的模块,模块大小根据网页大小自动改变,自己对这方面不是很懂,代码有点问题,希望有大神可以帮忙解决一下,大谢!

<!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").scrollLeft;
    if(_top < topValue){
        document.getElementById("searchDiv").scrollLeft += Math.round(Math.abs(_top-topValue)/2);
    }else if(_top > topValue){
        document.getElementById("searchDiv").scrollLeft -= 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; float:left">1111111111111111<br></div>
            <div style="border:1px solid blue;width:200px;height:398px; float:left">2222222222222222<br></div>
            <div style="border:1px solid blue;width:200px;height:398px; float:left">3333333333333333<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(200)"/></div>
        <div><input type="button" value="look 3" onclick="moveSearch(400)"/></div>
        <div id="show"></div>
    </body>
<html>
皮鞋很忙的主页 皮鞋很忙 | 初学一级 | 园豆:102
提问于:2014-08-22 18:42
< >
分享
所有回答(3)
0

能把你的需求说明确吗?
所谓模块 是指searchDiv?
想要实现的是浏览器大小变化,searchDiv大小也随之变化?

摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-08-23 00:21

对对。  比方说两个div  首先显示一个,向左滑动显示另一个,再向右滑动又变回来,div的大小根据浏览器窗口的大小而改变。  我可能用到不止两个div,能注释一下就非常感谢了。可以根据上面的代码改一下,这个是上下滑动的,然后我改成左右滚动,但是不能用。

支持(0) 反对(0) 皮鞋很忙 | 园豆:102 (初学一级) | 2014-08-23 00:31

@皮鞋很忙: 

div 尺寸随浏览器大小变化写了个简单的例子。
你那个滑来滑去的功能 没看明白要实现成什么样子。

<html>
<head>
<title>test</title>
</head>
    <body>
        <div id="searchDiv" style="border:1px solid blue;width:400px;height:200;">
        </div>
    </body>
    <script>
    var searchdiv=document.getElementById("searchDiv");
    var hs=searchdiv.offsetHeight/document.body.offsetHeight;//div高度/浏览器高度
    var ws=searchdiv.offsetWidth/document.body.offsetWidth;//div宽度/浏览器宽度
    window.onresize=function()
    {
        searchdiv.style.width=document.body.offsetWidth*ws;//浏览器窗体变化时,重新计算div宽度
        searchdiv.style.height=document.body.offsetHeight*hs;//浏览器窗体变化时,重新计算div高度
    }
    </script>
<html>
支持(0) 反对(0) 摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-08-23 10:40

@摇啊摇啊摇: 你这个直接百分比不就好了,我要的主要是滑动的功能,  就像手机菜单左右滑动的效果,然后再滑动的基础上让div根据窗口大小变化。

支持(0) 反对(0) 皮鞋很忙 | 园豆:102 (初学一级) | 2014-08-25 15:50

@皮鞋很忙: 

如果是通过鼠标左键点击 滑动实现的话

通过mousedown ,mouseup 事件 记录鼠标是否点击状态。

通过mousemove 事件返回的鼠标位置,重新计算div对应该移动的位置。基本可以实现。

如果想要div间连续不间断的效果的话。可以借鉴下类似走马灯的效果的例子。

http://www.cnblogs.com/lxpursue/p/3930683.html

支持(0) 反对(0) 摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-08-26 11:14
0

应该是说,鼠标点中一块,向右运动。像苹果的滑动效果吧。

forhells | 园豆:519 (小虾三级) | 2014-08-25 15:46

亲  你懂我 !

支持(0) 反对(0) 皮鞋很忙 | 园豆:102 (初学一级) | 2014-08-25 15:50

@皮鞋很忙: 虽然我理解。但是我不会。

支持(0) 反对(0) forhells | 园豆:519 (小虾三级) | 2014-08-27 19:26
0

看到有实现的好像是判断鼠标的位置和图层的相对位置

清风君 | 园豆:272 (菜鸟二级) | 2014-08-25 17:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册