青岛网站建设新闻资讯

前端响应式滚屏翻页代码,支持鼠标键盘控制

时间:2023-03-15 已阅读:593次 | 作者:青岛网站建设

首页>新闻资讯>建站知识
原代码改进:

1、新增固定导航条;

2、css语法格式错误修改,css样式修改;

3、新增页尾内容(不满一屏时)的响应展示;

4、静态显示文字优化;

5、疑问:比较奇怪的一个地方,只要页头添加了<!DOCTYPE html>,实际滚屏的时候就滚不到最后的页尾。

6、注意:在有固定导航的情况下,实际添加正文内容时,上下的间距应尽量避免使用 margin-top , margin-bottom,应使用 padding-top , padding-bottom 。正文内容的高度应使用百分比,来响应不同屏幕的高度。


改进后的代码如下:

<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>前端响应式滚屏翻页</title>
 
    <style>
        body{
            -webkit-text-size-adjust:none;
            overflow:hidden;
        }
 
        ul,li{
            margin:0;
            padding:0;
        }
 
        ul{
            list-style:none;
        }
 
        .section-wrap{
            width:100%;
            height:100%;
            position: fixed;
            top:0;
            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);
        }
 
        .section-wrap .section{
            position:relative;
            width:100%;
            height:100%;
            background-position:center center;
            background-repeat:no-repeat;
        }
 
        .section-wrap .section .title{
            width:100%;
            position:absolute;
            top:10%;
            color:#fff;
            font-size:2.4em;
            text-align:center;
        }
 
        .section-wrap .section .title p{
            padding:0 4%;
            opacity:0
        }
 
        .section-wrap .section .title.active .tit{
            opacity:1;
            transform:translateY(-50px);
            -webkit-transform:translateY(-50px);
            transition:all 2s cubic-bezier(0.86,0,0.8,1);
            -webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);
        }
 
        .section-wrap .section:nth-child(1){ background-color:#c7ddef}
        .section-wrap .section:nth-child(2){ background-color:#7fd53e}
        .section-wrap .section:nth-child(3){ background-color:#5bc0de}
        .section-wrap .section:nth-child(4){ background-color:#5cb85c}
        .section-wrap .section:nth-child(5){ background-color:#337ab7}
 
        .section-btn{
            width:14px;
            position:fixed;
            right:2%;
            top:40%;
            z-index: 99999;
        }
 
        .section-btn li{
            width:14px;
            height:14px;
            cursor:pointer;
            text-indent:-9999px;
            border-radius:50%;
            -webkit-border-radius:50%;
            margin-bottom:12px;
            background:#999;
            text-align:center;
            color:#fff;
        }
 
        .section-btn li.on{
            background:#f3f3f3
        }
 
        .arrow{
            opacity:1;
            animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;
            -webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;
            transform:rotate(-90deg);
            -webkit-transform:rotate(-90deg);
            position:absolute;
            bottom:10px;
            left:50%;
            margin-left:-30px;
            width:60px;
            height:60px;
            line-height:51px;
            font-size:32px;
            font-weight: normal;
            text-align: center;
            border-radius:100%;
            -webkit-border-radius:100%;
            color:#fff;
            border:1px solid #fff;
            cursor:pointer;
            overflow:hidden;
            box-sizing: border-box;
        }
 
        .arrow:hover{
            animation-play-state:paused;
            -webkit-animation-play-state:paused;
        }
 
        @keyframes arrow{
            0%{}
            100%{bottom:10px; opacity:1}
            50%{bottom:50px; opacity:0.5}
        }
 
        @-webkit-keyframes arrow{
            0%{}
            100%{bottom:10px; opacity:1}
            50% {bottom:50px; opacity:0.5}
        }
 
        .navBar{
            width:100%;
            position: fixed;
            top:0;
            z-index: 99;
            height:60px;
            line-height: 60px;
            text-align: center;
            font-weight: 500;
            background: #5e5e5e;
            color:#fff
        }
 
        .footer{
            width:100%;
            height:470px;
            line-height: 470px;
            text-align: center;
            font-weight: 500;
            background: #323232;
            color:#999
        }
    </style>
</head>
<body>
<div class="navBar">六州歌头·少年侠气</div>
<div class="section-wrap">
    <div class="section">
        <div class="title">
            <p class="tit">少年侠气,交结五都雄。</p>
        </div>
    </div>
    <div class="section">
        <div class="title">
            <p class="tit">肝胆洞,毛发耸。立谈中,死生同。一诺千金重!</p>
        </div>
    </div>
    <div class="section">
        <div class="title">
            <p class="tit">推翘勇,矜豪纵,轻盖拥,联飞鞚,斗城东。</p>
        </div>
    </div>
    <div class="section">
        <div class="title">
            <p class="tit">轰饮酒垆,春色浮寒瓮,吸海垂虹。闲呼鹰嗾犬,白羽摘雕弓,狡穴俄空。</p>
        </div>
    </div>
    <div class="section">
        <div class="title">
            <p class="tit">乐匆匆。</p>
        </div>
    </div>
 
    <div class="footer">[宋]贺铸</div>
</div>
 
<ul class="section-btn">
    <li class="on"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 
<div class="arrow">«</div>
 
 
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    //此处引用:鼠标滚轮mousewheel插件
    !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)}})});
 
    //页面初始化
    window.onload = function(){
        $('div.section-wrap').find('.section').eq(0).find('.title').addClass('active');
    }
 
    $(function(){
        var i=0;
        var $btn = $('ul.section-btn li'),
                $wrap = $('div.section-wrap'),
                $arrow = $('div.arrow');
 
        /*当前页面赋值*/
        function up(){i++;if(i==$btn.length){i=0}}
        function down(){i--;if(i<0){i=$btn.length-1}}
 
        function run(){
            var myRate;
            $btn.eq(i).addClass('on').siblings().removeClass('on');
            $wrap.find('.section').eq(i).find('.title').addClass('active');
            if(i  == 5){
                //计算滚动到最后需要滚动的高度百分比
                //页尾高度470
                myRate=400+100*(470/Number(document.body.clientHeight)).toFixed(6)
            }else{
                myRate=100*i
            }
            //修改页面元素样式
            $("div.section-wrap").css("transform","translateY(-"+myRate+"%)");
            $("div.section-wrap").css("-webkit-transform","translateY(-"+myRate+"%)");
        }
 
        /*右侧按钮点击*/
        $btn.each(function(index) {
            $(this).click(function(){
                i=index;
                run();
            })
        })
 
        /*翻页按钮点击*/
        $arrow.one('click',go);
        function go(){
            up();
            run();
            setTimeout(function(){$arrow.one('click',go)},1000)
        }
 
        /*响应鼠标*/
        $wrap.one('mousewheel',mouse_);
        function mouse_(event){
            if(event.deltaY<0) {up()}
            else{down()}
            run();
            setTimeout(function(){$wrap.one('mousewheel',mouse_)},1000)
        }
 
        /*响应键盘上下键*/
        $(document).one('keydown',k);
        function k(event){
            var e=event||window.event;
            var key=e.keyCode||e.which||e.charCode;
            switch(key) {
                case 38: down();run();
                    break;
                case 40: up();run();
                    break;
            }
            setTimeout(function(){$(document).one('keydown',k)},1000);
        }
    })
</script>
 
</body>
</html>



二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1385.html

相关资讯

Copyright © 2011-2024 青华互联-青岛青华锐思网络科技有限公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图