如何实现鼠标滚轮横向滑屏？ - 编程论坛

#2

Paxster2014-07-18 17:05

利用onscroll事件来滚动鼠标（前提是有滚动条产生，就是你的宽度和或者高度要超过浏览器的视图），并且需要判断横向滚动和竖向滚动；同时还要考虑不同浏览器之间的兼容性。

#3

dkp882014-11-18 16:02

程序代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向滚屏</title>
<script src="http://code.></script>
<script src="http://www.></script>
<script>
/*上面的两个JS文件下载引用即可*/
$(function(){
    var w1=$(window).width();/*这里自定义宽度*/
    var h1=$(window).height();/*这里自定义高度*/
    $("#myid .page").width(w1).height(h1).parent("div").width($("#myid .page").length*w1);/*这里设置尺寸*/
    $("#myid").bind('mousewheel', function(event, delta, deltaX, deltaY) {/*这里绑定滚轮事件*/
        var l1=$("#myid").scrollLeft();/*获取当前滚动位置的值*/
        if (l1==null) l1=0;
        if(!$("#myid").is(":animated")){//如果不在执行翻屏
            if (delta==-1){
                $("#myid").animate({
                    scrollLeft:l1+w1    /*往后翻*/
                    });
            }else{
                $("#myid").animate({
                    scrollLeft:l1-w1    /*往前翻*/
                    });

            }
        }
    });
    })
</script>
<style>
body{padding:0;margin:0;overflow:hidden;}
.page{float:left;}
#myid{overflow:hidden;/*overflow:auto;/**/font-size:100px;}
</style>
</head>

<body>
<div id="myid">
<div>
    <div class="page" style="background:blue;">第一屏</div>
    <div class="page" style="background:#ccc;">第二屏</div>
    <div class="page" style="background:#296C05;">第三屏</div>
    <div class="page" style="background:#C0BF38;">第四屏</div>
</div>
</div>
</body>
</html>

[ 本帖最后由 dkp88 于 2014-11-18 16:03 编辑 ]

#4

shanshuiboy2015-01-09 20:00

这个效果相当不错