日期:2014-05-16  浏览次数:20374 次

关于横向滚动问题,请大神写一个简单的DEMO
接触JS很少,有一个功能需要求解。

比如现在需要做一个类似WIN8的页面,需要页面进行横向滚动
就是鼠标上下滚动,页面横向滚动。
IFRAME做也是可以的,这样更好改一些。
具体的效果比如这个网站:http://www.qileke.com/


想知道一下具体的方法,做个简单的DEMO给我就好

onmousewheel事件如何改变scrollLeft  并且造成移动。
谢谢大家,demo最好任何浏览器都可以生效

------解决方案--------------------
<div id="out_div" style="border: 1px solid #ddd;height: 300px;width:99%;overflow: hidden;">
    <div style="width:6000px;height:300px;background: url('http://avatar.profile.csdn.net/3/2/D/1_nojobs.jpg')">
    </div>
</div>
<script type="text/javascript">
    function scrollFunc(e) {
        var direct = 0,i = id.scrollLeft;
        e = e 
------解决方案--------------------
 window.event;
        if (e.wheelDelta) {
            direct = e.wheelDelta;
        } else if (e.detail) {
            direct = e.detail;
        }
        if (direct < 0) {
            i +=speed;
        } else {
            i -=speed;
        }
        id.scrollLeft=i;
        //$("#out_div").stop().animate({scrollLeft:t},"slow");如果用jquery就在此做动画,滚动就不会生硬。
    }
    var id=document.getElementById("out_div");
    var speed=40;//调整速度
    if (document.addEventListener) {
        id.addEventListener('DOMMouseScroll', scrollFunc, false);//Firefox
    }
    id.onmousewheel = scrollFunc; //IE
</script>

经过IE8,ie6(添加width:99%就是因为IE6),360,chrome,safari,傲游,firefox测试