关于横向滚动问题，请大神写一个简单的DEMO

[十一啊]

接触JS很少，有一个功能需要求解。

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


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

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

[-晴天]

到这些JS里去找吧 <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js?v=7251046"></script> <script type="text/javascript" src="js/jquery/jquery-ui-1.8.23.custom.min.js?v=7251046"></script> <script type="text/javascript" src="js/jquery/jquery.easing.1.3.js?v=7251046"></script> <script type="text/javascript" src="js/jquery/jquery.imagesLoaded.js?v=7251046"> </script> <script type="text/javascript" src="js/jquery/jquery.backstretch.min.js?v=7251046"> </script> --> <script type="text/javascript" src="js/jquery/jquery-custom-min.js?v=12925"></script> <script type="text/javascript" src="js/extjs/ext-all.js?v=7251046"></script> <!-- <script type="text/javascript" src="js/locale/qlk.zh-cn.js?v=12925"></script> <script type="text/javascript" src="js/locale/qlk.en-us.js?v=12925"></script> <script type="text/javascript" src="js/common/language.js?v=12925"></script> <script type="text/javascript" src="js/common/ExtCommon.js"></script> <script type="text/javascript" src="js/sy/sy.js"></script> <script type="text/javascript" src="js/common/qlk.js"></script> --> <script src="http://a.tbcdn.cn/apps/top/x/sdk.js?appkey=21253190"></script> <script type="text/javascript" src="js/build/qileke-min.js?v=115"></script> <!-- <script type="text/javascript" src="js/page/app.js"></script>

[十一啊]

......这么苦力的活，我还求助什么劲了，已经找了好半天了

[十一啊]

没有大神在了么？求帮助

[十一啊]

引用 9 楼 xzy21com 的回复:

XML/HTML code?12345678910111213141516171819202122232425262728<div id="out_div" style="border: 1px solid #ddd;height: 300px;width:99%;overflow: hidden;"> <div style="width:6000px;height……

谢谢你的帮助！

[scscms太阳光]

<div id="out_div" style="border: 1px solid #ddd;height: 300px;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
    }else{
        id.onmousewheel = scrollFunc; //IE
    }
</script>

[十一啊]

引用 4 楼 xzy21com 的回复:

XML/HTML code?1234567891011121314151617181920212223242526272829<div id="out_div" style="border: 1px solid #ddd;height: 300px;overflow: hidden;"> <div style="width:6000px;height:300px;b……

话说 谷歌浏览器无效，火狐是好用的

[十一啊]

引用 4 楼 xzy21com 的回复:

XML/HTML code?1234567891011121314151617181920212223242526272829<div id="out_div" style="border: 1px solid #ddd;height: 300px;overflow: hidden;"> <div style="width:6000px;height:300px;b……

百度一下好像是这样： if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari </script> 具体怎么改呢。。

[tcpfeng]

要这个http://www.qileke.com/来改不就行了

[scscms太阳光]

if (document.addEventListener) { id.addEventListener('DOMMouseScroll', scrollFunc, false);//Firefox } id.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari 这样试试 window.onmousewheel=document.onmousewheel=scrollFunc;//这样表示鼠标在整个网页中滚动鼠标都起作用，上面我写的是想鼠标在滚动区域内滚动才起作用。

[scscms太阳光]

<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测试