找回密码
当前位置：前端开发者 > 未分类 > 正文

前端开发效果实例_CSS3页面纵向滑动效果

2018-07-18 分类：未分类 阅读(652) 评论(0)

前端组建化开发实例|前端程序开发实例|前端就是安卓开发吗

代码片段 1

<!Doctype 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>web前端开发就业优势：css3页面效果</title>
    <meta name=”keywords” content=”” />
    <meta name=”description” content=”” />
    <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, b8bf53, 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, b8bf53, 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″>I will never say never</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”>&laquo;</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>

前端开发应如何优化|前端开发女生多不多|女生前端开发入门薪水

赞(1)
前端开发者 » 前端开发效果实例_CSS3页面纵向滑动效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论