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

Question

接触JS很少，有一个功能需要求解。比如现在需要做一个类似WIN8的页面，需要页面进行横向滚动
就是鼠标上下滚动，页面横向滚动。
IFRAME做也是可以的，这样更好改一些。
具体的效果比如这个网站：http://www.qileke.com/
想知道一下具体的方法，做个简单的DEMO给我就好onmousewheel事件如何改变scrollLeft  并且造成移动。
谢谢大家，demo最好任何浏览器都可以生效

Answer 1

到这些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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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