css3纵向滚屏翻页，支持键盘，鼠标操作

最新推荐文章于 2023-10-20 16:11:35 发布
新时代新目标新征程
最新推荐文章于 2023-10-20 16:11:35 发布
阅读量1k
点赞数
分类专栏： jquery
本文链接：https://blog.csdn.net/chuntian1983/article/details/77450579
版权
jquery 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="renderer" content="webkit">
<title>css3纵向滚屏翻页，支持键盘，鼠标操作</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--鼠标滚轮mousewheel插件，我直接将插件代码直接粘这里了，要不没地方单独放这个文件-->
<script>
    !function (a) { "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a : a(jQuery) } (function (a) { function b(b) { var g = b || window.event, h = i.call(arguments, 1), j = 0, l = 0, m = 0, n = 0, o = 0, p = 0; if (b = a.event.fix(g), b.type = "mousewheel", "detail" in g && (m = -1 * g.detail), "wheelDelta" in g && (m = g.wheelDelta), "wheelDeltaY" in g && (m = g.wheelDeltaY), "wheelDeltaX" in g && (l = -1 * g.wheelDeltaX), "axis" in g && g.axis === g.HORIZONTAL_AXIS && (l = -1 * m, m = 0), j = 0 === m ? l : m, "deltaY" in g && (m = -1 * g.deltaY, j = m), "deltaX" in g && (l = g.deltaX, 0 === m && (j = -1 * l)), 0 !== m || 0 !== l) { if (1 === g.deltaMode) { var q = a.data(this, "mousewheel-line-height"); j *= q, m *= q, l *= q } else if (2 === g.deltaMode) { var r = a.data(this, "mousewheel-page-height"); j *= r, m *= r, l *= r } if (n = Math.max(Math.abs(m), Math.abs(l)), (!f || f > n) && (f = n, d(g, n) && (f /= 40)), d(g, n) && (j /= 40, l /= 40, m /= 40), j = Math[j >= 1 ? "floor" : "ceil"](j / f), l = Math[l >= 1 ? "floor" : "ceil"](l / f), m = Math[m >= 1 ? "floor" : "ceil"](m / f), k.settings.normalizeOffset && this.getBoundingClientRect) { var s = this.getBoundingClientRect(); o = b.clientX - s.left, p = b.clientY - s.top } return b.deltaX = l, b.deltaY = m, b.deltaFactor = f, b.offsetX = o, b.offsetY = p, b.deltaMode = 0, h.unshift(b, j, l, m), e && clearTimeout(e), e = setTimeout(c, 200), (a.event.dispatch || a.event.handle).apply(this, h) } } function c() { f = null } function d(a, b) { return k.settings.adjustOldDeltas && "mousewheel" === a.type && b % 120 === 0 } var e, f, g = ["wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll"], h = "onwheel" in document || document.documentMode >= 9 ? ["wheel"] : ["mousewheel", "DomMouseScroll", "MozMousePixelScroll"], i = Array.prototype.slice; if (a.event.fixHooks) for (var j = g.length; j; ) a.event.fixHooks[g[--j]] = a.event.mouseHooks; var k = a.event.special.mousewheel = { version: "3.1.12", setup: function () { if (this.addEventListener) for (var c = h.length; c; ) this.addEventListener(h[--c], b, !1); else this.onmousewheel = b; a.data(this, "mousewheel-line-height", k.getLineHeight(this)), a.data(this, "mousewheel-page-height", k.getPageHeight(this)) }, teardown: function () { if (this.removeEventListener) for (var c = h.length; c; ) this.removeEventListener(h[--c], b, !1); else this.onmousewheel = null; a.removeData(this, "mousewheel-line-height"), a.removeData(this, "mousewheel-page-height") }, getLineHeight: function (b) { var c = a(b), d = c["offsetParent" in a.fn ? "offsetParent" : "parent"](); return d.length || (d = a("body")), parseInt(d.css("fontSize"), 10) || parseInt(c.css("fontSize"), 10) || 16 }, getPageHeight: function (b) { return a(b).height() }, settings: { adjustOldDeltas: !0, normalizeOffset: !0} }; a.fn.extend({ mousewheel: function (a) { return a ? this.bind("mousewheel", a) : this.trigger("mousewheel") }, unmousewheel: function (a) { return this.unbind("mousewheel", a) } }) });
</script>
<!--mousewheel插件 end-->

<style type="text/css">
/*===reset===*/
body{color:#222;-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
fieldset,img{border:0; display:inline-block;}
address,caption,cite,dfn,em,th,var{font-style:normal;font-weight:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block; margin:0; padding:0;}/* HTML5 */
code,kbd,pre,samp{font-family:courier new,courier,monospace}
ol,ul{list-style:none;}
a{text-decoration:none; color:#222;}
a:hover{color:#000;text-decoration: none;zoom:1}
a:active{color:#666;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,select,button{ vertical-align: baseline; *vertical-align:middle;font-family: tahoma, \5b8b\4f53, arial; font-size: 100%;  }
input[type=checkbox],input[type=radio]{vertical-align:middle; margin:0 5px;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}textarea{resize:none;}
textarea{overflow:auto; font:100% tahoma,\5b8b\4f53,arial;}
table{border-collapse:collapse; border-spacing:0;}
/*===reset end===*/

html,body{ width:100%; height:100%; overflow:hidden;}
.section-wrap{width:100%; height:100%; overflow:visible;
transition:transform 1s cubic-bezier(0.86,0,0.03,1);
-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
-ms-transition:-ms-transform 1s cubic-bezier(0.86,0,0.03,1);
-moz-transition:-moz-transform 1s cubic-bezier(0.86,0,0.03,1);
-o-transition:-o-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
.section-wrap .section .title{padding:150px 0 0 50px; color:#fff; font-size:40px;text-align:center; font-family:"Microsoft YaHei";}
.section-wrap .section .title p{ opacity:0}
.section-wrap .section .title .p-2{color:#ccc; font-size:20px;}
.section-wrap .section .title.active .p-1{ 
 opacity:1;transform:translateY(-25px);
-webkit-transform:translateY(-25px);
-ms-transform:translateY(-25px);
-moz-transform:translateY(-25px);
 -o-transform:translateY(-25px); 
 transition:all 2s cubic-bezier(0.86,0,0.8,1);
 -webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);
 -ms-transition:all 2s cubic-bezier(0.86,0,0.8,1);
 -moz-transition:all 2s cubic-bezier(0.86,0,0.8,1); 
 -o-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
.section-wrap .section .title.active .p-2{ opacity:1; 
transform:translateY(-25px);
-webkit-transform:translateY(-25px);
-ms-transform:translateY(-25px);
-moz-transform:translateY(-25px);
 -o-transform:translateY(-25px);
transition:all 2s cubic-bezier(0.5,0,0.9,1);
-webkit-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-ms-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-moz-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-o-transition:all 2s cubic-bezier(0.5,0,0.9,1);}
.section-wrap .section-1{ background-color:#0066a5}
.section-wrap .section-2{ background-color:#065E69}
.section-wrap .section-3{ background-color:#0D2C7C}
.section-wrap .section-4{ background-color:#0C6242}
.section-wrap .section-5{ background-color:#413004}
.put-section-0{transform:translateY(0);
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform:translateY(0); }
.put-section-1{transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);}
.put-section-2{transform:translateY(-200%);
-webkit-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-o-transform:translateY(-200%);}
.put-section-3{transform:translateY(-300%);
-webkit-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-o-transform:translateY(-300%);}
.put-section-4{transform:translateY(-400%);
-webkit-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-o-transform:translateY(-400%);}
.section-btn{ position:fixed; right:40px;top:50%; width:14px;}
.section-btn li{margin-bottom:15px; background:#069052;text-align:center; color:#fff; cursor:pointer;}
.section-btn li.cur{ background:#0CEA87}
.go-btn{ opacity:1;
webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-ms-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-moz-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-o-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
 transform:rotate(-90deg);
 -webkit-transform:rotate(-90deg); 
 -ms-transform:rotate(-90deg); 
 -moz-transform:rotate(-90deg); 
 -o-transform:rotate(-90deg); 
  position:absolute;bottom:10px;left:48%;
  width:60px; height:60px; border-radius:100%; line-height:60px; text-align:center; font-size:20px; color:#fff; border:1px solid #fff; cursor:pointer; overflow:hidden}
.go-btn:hover{
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
    -ms-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
}
@keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
    }
@-webkit-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
    }
@-ms-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
    }
@-moz-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
    }
@-o-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
    }
</style>
<!--[if lte IE 8]>
<style type="text/css">
    html,body{width:100%; height:100%; overflow:scroll}
    .section-btn{display:none;}
</style>
<![endif]-->

</head>

<body>
<div class="section-wrap">
        <div class="section section-1"><div class="title active"><p class="p-1">点右边的按钮,底部的按钮，滚动鼠标滚轮,按下键盘方向上下键查看效果</p><p class="p-2">Just the way u are!</p></div></div>
        <div class="section section-2"><div class="title"><p class="p-1">无论我们距离有多远，我都永远by your side!</p><p class="p-2">I am just kidding!</p></div></div>
        <div class="section section-3"><div class="title"><p class="p-1">就是这么任性</p><p class="p-2">From justin bieber</p></div></div>
        <div class="section section-4"><div class="title"><p class="p-1">you are just like the angle</p><p class="p-2">I tell you seriously</p></div></div>
        <div class="section section-5"><div class="title"><p class="p-1">life sucks sometime somehow</p><p class="p-2">I feel that</p></div></div>
    </div>
    <ul class="section-btn">
      <li class="cur">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <div class="go-btn">«</div>
</body>

<script>
    $(function () {
        var btn_index = 0;
        /*右边按钮点击*/
        $('.section-btn li').each(function (index) {
            $(this).click(function () {
                btn_index = index;
                scroller();
            })
        });
        /*翻页按钮点击*/
        $('.go-btn').one('click', btn_go);
        function btn_go() {
            go_up(); scroller();
            setTimeout(function () { $('.go-btn').one('click', btn_go) }, 1000)
        };
        /*响应鼠标*/
        $('.section-wrap').one('mousewheel', mouse_);
        function mouse_(event) {
            if (event.deltaY < 0) { go_up() }
            else { go_down() }
            scroller();
            setTimeout(function () { $('.section-wrap').one('mousewheel', mouse_) }, 1000)
        };

        /*当前页面赋值*/
        function go_up() { btn_index++; if (btn_index == $('.section-btn li').length) { btn_index = $('.section-btn li').length - 1 }; }
        function go_down() { btn_index--; if (btn_index < 0) { btn_index = 0 }; }

        /*页面滑动*/
        function scroller() {
            $('.section-btn li').eq(btn_index).addClass('cur').siblings().removeClass('cur');
            $('.section-wrap').attr("class", "section-wrap").addClass(function () {
                return "put-section-" + btn_index;
            }).find('.section').eq(btn_index).find('.title').addClass('active');
        };

        /*响应键盘上下键*/
        $(document).one('keydown', keyaction);
        function keyaction(event) {
            var e = event || window.event;
            var key = e.keyCode || e.which || e.charCode;
            switch (key) {
                case 38: go_down(); scroller();
                    break;
                case 40: go_up(); scroller();
                    break;
            };
            setTimeout(function () { $(document).one('keydown', keyaction) }, 1000)
        }


    })

</script>
</html>
新时代新目标新征程
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3纵向滚屏翻页，支持键盘，鼠标操作

css3纵向滚屏翻页，支持键盘，鼠标操作 !function (a) { "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a : a(jQuery) } (function (a) { function b
复制链接

扫一扫