如何实现鼠标滚轮横向滑屏？ - WEB前端(UI)

魅心

等　级：新手上路
帖　子：4
专家分：0
注　册：2014-5-5

楼主

问题点数：0 回复次数：4

如何实现鼠标滚轮横向滑屏？

如何实现鼠标滚轮滑动横向滑屏？

搜索更多相关主题的帖子: 如何　

2014-05-05 14:55

dkp88

等　级：新手上路
帖　子：235
专家分：5
注　册：2004-10-18

第 3 楼

得分:0

程序代码：

<!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 编辑 ]

学程序真有味！

2014-11-18 16:02