网页实现左右滑动效果
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>
所有回答(3)
0
能把你的需求说明确吗？
所谓模块 是指searchDiv？
想要实现的是浏览器大小变化，searchDiv大小也随之变化？
对对。 比方说两个div 首先显示一个，向左滑动显示另一个，再向右滑动又变回来，div的大小根据浏览器窗口的大小而改变。 我可能用到不止两个div，能注释一下就非常感谢了。可以根据上面的代码改一下，这个是上下滑动的，然后我改成左右滚动，但是不能用。
@皮鞋很忙:
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>
@摇啊摇啊摇: 你这个直接百分比不就好了，我要的主要是滑动的功能， 就像手机菜单左右滑动的效果，然后再滑动的基础上让div根据窗口大小变化。
@皮鞋很忙:
如果是通过鼠标左键点击 滑动实现的话
通过mousedown ，mouseup 事件 记录鼠标是否点击状态。
通过mousemove 事件返回的鼠标位置，重新计算div对应该移动的位置。基本可以实现。
如果想要div间连续不间断的效果的话。可以借鉴下类似走马灯的效果的例子。
http://www.cnblogs.com/lxpursue/p/3930683.html
0
应该是说，鼠标点中一块，向右运动。像苹果的滑动效果吧。
亲 你懂我 ！
@皮鞋很忙: 虽然我理解。但是我不会。
0
看到有实现的好像是判断鼠标的位置和图层的相对位置
