創意網站導航和輪播圖欣賞-有解無憂

效果圖

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"><!-- 百度cdn的bootstrap -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body onmousemove="" ontouchstart="">
    <!-- nav導航 -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top hc-top-up">
        <div class="container-fluid">
            <a href="javascript:void(0)" class="hc-logobox"><img src="images/logo.png" /></a>
            <div class="navbar-right hc-contact p768">
                <a href="#">微信</a>
                <a href="#">博客</a>
            </div>
            <div id="oiBtn" class="hc-oi p1100"><em></em></div>
            <ul id="navBox" class="nav navbar-nav navbar-right hc-navbox">
                <li>
                    <a class="nav-on" href="#">index</a>
                    <a class="nav-off" href="#">首頁</a>
                </li>
                <li>
                    <a class="nav-on" href="#">About Us</a>
                    <a class="nav-off" href="#">關于我們</a>
                </li>
                <li>
                    <a class="nav-on" href="#">News</a>
                    <a class="nav-off" href="#">新聞資訊</a>
                </li>
                <li>
                    <a class="nav-on" href="#">Services</a>
                    <a class="nav-off" href="#">服務內容</a>
                </li>
                <li>
                    <a class="nav-on" href="#">Project</a>
                    <a class="nav-off" href="#">經典案例</a>
                </li>
                <li>
                    <a class="nav-on" href="#">Project</a>
                    <a class="nav-off" href="#">經典案例</a>
                </li>
                <li>
                    <a class="nav-on" href="#">Contact Us</a>
                    <a class="nav-off" href="#">聯系我們</a>
                </li>
                <li>
                    <a class="nav-on" href="#">Support</a>
                    <a class="nav-off" href="#">技術支持</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- banner輪播圖 -->
    <section class="hc-banner">
        <ol></ol>
        <ul class="banner">
            <li class="hc-bannerbg" style="background-image: url(images/banner01.jpg);">
                <div class="hc-fly">
                    <img class="fly-one" src="images/super-H.png" />
                    <div class="fly-two"></div>
                    <p class="fly-three">Innovative thinking new ideas perfect design</p>
                    <p class="fly-four">創新思維 新穎理念 完美設計</p>
                </div>
            </li>
            <li class="hc-bannerbg" style="background-image: url(images/banner02.jpg);">
                <div class="hc-fly">
                    <img class="fly-one" src="images/super-H.png" />
                    <div class="fly-two"></div>
                    <p class="fly-three">Innovative thinking new ideas perfect design</p>
                    <p class="fly-four">創新思維 新穎理念 完美設計</p>
                </div>
            </li>
        </ul>
    </section>

    <script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
    <script src="js/script.js"></script>
</body>
</html>

reset.css

@charset "utf-8";
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0
}
table {
    border-collapse:collapse;
    border-spacing:0
}
input,textarea {
    outline-style:none
}
fieldset,img {
    border:0
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight:400;
    font-style:normal
}
ol,ul {
    list-style:none
}
caption,th {
    text-align:left
}
h1,h2,h3,h4,h5,h6 {
    font-weight:400;
    font-size:100%
}
q:before,q:after {
    content:''
}
abbr,acronym {
    border:0
}
p {
    word-wrap:break-word
}
a:active {
    text-decoration:none!important
}
a:hover {
    text-decoration:none!important
}
a:link {
    text-decoration:none!important
}
a:visited {
    text-decoration:none!important
}
a {
    text-decoration:none!important
}
* {
    font-family:微軟雅黑
}
.ff_song {
    font-family:宋體
}
.f_left {
    float:left;
    padding:0;
    margin:0
}
.f_right {
    float:right;
    padding:0;
    margin:0
}

style.css

.hc-top-up {
    background:transparent;
    border-color:rgba(255,255,255,.4);
    transition:.5s
}
.hc-top-nd {
    background:rgba(255,255,255,.9);
    border:0;
    box-shadow:0 0 5px #888;
    transition:.5s
}
.hc-banner {
    margin:0;
    height:100vh;
    width:100%;
    overflow:hidden;
    position:relative
}
.hc-banner .banner li {
    width:100%;
    height:100vh;
    position:absolute;
    left:0;
    top:0;
    background-position:center;
    background-size:cover;
    overflow:hidden
}
.left {
    float:left;
    width:30px;
    height:52px;
    line-height:52px;
    color:#fff;
    left:10px;
    background:rgba(0,0,0,.7)
}
.right {
    float:right;
    width:30px;
    height:52px;
    line-height:52px;
    color:#fff;
    right:10px;
    background:rgba(0,0,0,.7)
}
a.btn {
    position:relative;
    top:120px;
    z-index:10;
    cursor:pointer;
    text-align:center;
    font-size:32px
}
.left {
    float:left;
    width:30px;
    height:52px;
    line-height:52px;
    color:#fff;
    left:10px;
    background:rgba(0,0,0,.7)
}
.right {
    float:right;
    width:30px;
    height:52px;
    line-height:52px;
    color:#fff;
    right:10px;
    background:rgba(0,0,0,.7)
}
ol {
    position:relative;
    display:table;
    margin:0 auto;
    top:90vh;
    z-index:10
}
ol li {
    float:left;
    width:50px;
    height:10px;
    margin:0 10px;
    border-radius:2px;
    background:rgba(215,215,215,.5);
    cursor:pointer
}
ol li.red {
    background:#ff0
}
@media only screen and (min-width:1100px) {
    .p1100 {
    display:none
}
.hc-top-up .hc-logobox {
    display:inline-block;
    padding:10px;
    border-right:1px solid rgba(255,255,255,.4)
}
.hc-top-nd .hc-logobox {
    display:inline-block;
    padding:10px;
    border-right:1px solid rgba(0,0,0,.4)
}
#mainNav .hc-logobox img {
    height:40px
}
#mainNav .hc-contact,#mainNav .hc-navbox {
    height:30px;
    overflow:hidden;
    margin:15px 10px auto
}
#mainNav .hc-navbox li {
    transition:.5s;
    top:0;
    padding:0 5px
}
#mainNav .hc-navbox li:hover {
    transition:.5s;
    top:-30px
}
#mainNav .hc-contact a {
    padding:0 15px;
    line-height:28px;
    display:inline-block;
    color:#666;
    border:1px solid rgba(255,255,255,.8);
    border-radius:30px;
    transition:.5s
}
#mainNav .hc-contact a:nth-child(1),#mainNav .hc-contact a:hover {
    background:#fccf12!important;
    border-radius:50px;
    color:#333!important;
    transition:.5s
}
#mainNav .hc-navbox li>.nav-off,#mainNav .hc-navbox li:hover>.nav-off {
    background:#fccf12!important;
    border-radius:50px;
    color:#333!important
}
#mainNav .nav li a:nth-child(n) {
    text-align:center;
    line-height:30px;
    display:block;
    padding:0 15px
}
.hc-fly {
    width:45%;
    height:100vh;
    position:absolute;
    top:15%;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    opacity:1;
    transition:1s
}
.hc-fly img:nth-child(1) {
    width:75%;
    display:block;
    margin:0 auto
}
.hc-fly p:nth-child(3) {
    height:20px;
    font-size:18px;
    text-align:center;
    color:rgba(255,255,255,.6);
    position:absolute;
    left:0;
    right:0;
    bottom:37%;
    letter-spacing:2px
}
.hc-fly p:nth-child(4) {
    height:20px;
    font-size:28px;
    text-align:center;
    color:rgba(255,255,255,.9);
    position:absolute;
    left:0;
    right:0;
    bottom:22%
}
}@media only screen and (max-width:768px) {
    .p768 {
    display:none
}
.hc-navbox {
    width:100%;
    position:absolute;
    top:0;
    background:rgba(255,255,255,.9);
    z-index:-1;
    margin:0 -15px;
    padding-top:0;
    height:0;
    overflow:hidden;
    opacity:0;
    transition:.5s
}
.hc-navbox01 {
    width:100%;
    position:absolute;
    top:0;
    background:rgba(255,255,255,.9);
    z-index:-1;
    margin:0 -15px;
    padding-top:50px;
    height:100vh;
    overflow:hidden;
    opacity:1;
    transition:.5s
}
#navBox li {
    height:40px;
    width:100%;
    overflow:hidden;
    text-align:center;
    margin:10px 0;
    font-size:1.2em
}
#navBox li:active {
    background:#fff
}
#navBox li .nav-on {
    display:none
}
#mainNav .hc-logobox img {
    height:50px;
    padding:10px
}
#mainNav .hc-oi {
    width:24px;
    height:24px;
    border-radius:4px;
    background:#fccb0d;
    position:absolute;
    right:20px;
    top:13px;
    padding:3px;
    box-shadow:0 -1px 5px #705900 inset
}
#mainNav .hc-io {
    width:24px;
    height:24px;
    border-radius:4px;
    background:#fccb0d;
    position:absolute;
    right:20px;
    top:13px;
    padding:3px;
    box-shadow:0 1px 5px #705900 inset
}
#mainNav .hc-oi em {
    position:absolute;
    left:50%;
    top:50%;
    bottom:auto;
    right:auto;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    display:inline-block;
    width:16px;
    height:2px;
    background-color:#353535;
    z-index:10
}
#mainNav .hc-oi em::before,#mainNav .hc-oi em:after,#mainNav .hc-oi em::before,#mainNav .hc-oi em:after {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-color:#353535;
    -webkit-transform:translateZ(0);
    -moz-transform:translateZ(0);
    -ms-transform:translateZ(0);
    -o-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transition:-webkit-transform .3s;
    -moz-transition:-moz-transform .3s;
    transition:transform .3s
}
#mainNav .hc-oi em::before {
    -webkit-transform:translateY(-6px) rotate(0deg);
    -moz-transform:translateY(-6px) rotate(0deg);
    -ms-transform:translateY(-6px) rotate(0deg);
    -o-transform:translateY(-6px) rotate(0deg);
    transform:translateY(-6px) rotate(0deg)
}
#mainNav .hc-oi em::after {
    -webkit-transform:translateY(6px) rotate(0deg);
    -moz-transform:translateY(6px) rotate(0deg);
    -ms-transform:translateY(6px) rotate(0deg);
    -o-transform:translateY(6px) rotate(0deg);
    transform:translateY(6px) rotate(0deg)
}
#mainNav .hc-io em {
    background:transparent
}
#mainNav .hc-io em::before {
    -webkit-transform:translateY(0px) rotate(45deg);
    -moz-transform:translateY(0px) rotate(45deg);
    -ms-transform:translateY(0px) rotate(45deg);
    -o-transform:translateY(0px) rotate(45deg);
    transform:translateY(0px) rotate(45deg)
}
#mainNav .hc-io em::after {
    -webkit-transform:translateY(0px) rotate(-45deg);
    -moz-transform:translateY(0px) rotate(-45deg);
    -ms-transform:translateY(0px) rotate(-45deg);
    -o-transform:translateY(0px) rotate(-45deg);
    transform:translateY(0px) rotate(-45deg)
}
.hc-fly {
    width:100%;
    height:100vh;
    position:relative
}
.hc-fly .fly-one {
    width:75%;
    position:absolute;
    left:50%;
    top:20%;
    margin-left:-37%;
    opacity:1
}
.hc-fly .fly-two {
    width:100%;
    height:30vh;
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    background:rgba(252,203,13,.5);
    opacity:1
}
.hc-fly .fly-three {
    height:20px;
    font-size:18px;
    text-align:center;
    color:rgba(255,255,255,.8);
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:25vh;
    letter-spacing:2px
}
.hc-fly .fly-four {
    height:20px;
    font-size:18px;
    text-align:center;
    color:#fff;
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:15vh;
    letter-spacing:2px
}
}@media only screen and (min-width:769px) and (max-width:1099px) {
    .p768 {
    display:none
}
.hc-navbox {
    width:100%;
    position:absolute;
    top:0;
    background:rgba(255,255,255,.9);
    z-index:-1;
    margin:0 -15px;
    padding-top:0;
    height:0;
    overflow:hidden;
    opacity:0;
    transition:.5s
}
.hc-navbox01 {
    width:100%;
    position:absolute;
    top:0;
    background:rgba(255,255,255,.9);
    z-index:-1;
    margin:0 -15px;
    padding-top:50px;
    height:100vh;
    overflow:hidden;
    opacity:1;
    transition:.5s
}
#navBox li {
    height:40px;
    width:100%;
    overflow:hidden;
    text-align:center;
    margin:10px 0;
    font-size:1.2em
}
#navBox li:active {
    background:#fff
}
#navBox li .nav-on {
    display:none
}
#mainNav .hc-logobox img {
    height:50px;
    padding:10px
}
#mainNav .hc-oi {
    width:24px;
    height:24px;
    border-radius:4px;
    background:#fccb0d;
    position:absolute;
    right:20px;
    top:13px;
    padding:3px;
    box-shadow:0 -1px 5px #705900 inset
}
#mainNav .hc-io {
    width:24px;
    height:24px;
    border-radius:4px;
    background:#fccb0d;
    position:absolute;
    right:20px;
    top:13px;
    padding:3px;
    box-shadow:0 1px 5px #705900 inset
}
#mainNav .hc-oi em {
    position:absolute;
    left:50%;
    top:50%;
    bottom:auto;
    right:auto;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    display:inline-block;
    width:16px;
    height:2px;
    background-color:#353535;
    z-index:10
}
#mainNav .hc-oi em::before,#mainNav .hc-oi em:after,#mainNav .hc-oi em::before,#mainNav .hc-oi em:after {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-color:#353535;
    -webkit-transform:translateZ(0);
    -moz-transform:translateZ(0);
    -ms-transform:translateZ(0);
    -o-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transition:-webkit-transform .3s;
    -moz-transition:-moz-transform .3s;
    transition:transform .3s
}
#mainNav .hc-oi em::before {
    -webkit-transform:translateY(-6px) rotate(0deg);
    -moz-transform:translateY(-6px) rotate(0deg);
    -ms-transform:translateY(-6px) rotate(0deg);
    -o-transform:translateY(-6px) rotate(0deg);
    transform:translateY(-6px) rotate(0deg)
}
#mainNav .hc-oi em::after {
    -webkit-transform:translateY(6px) rotate(0deg);
    -moz-transform:translateY(6px) rotate(0deg);
    -ms-transform:translateY(6px) rotate(0deg);
    -o-transform:translateY(6px) rotate(0deg);
    transform:translateY(6px) rotate(0deg)
}
#mainNav .hc-io em {
    background:transparent
}
#mainNav .hc-io em::before {
    -webkit-transform:translateY(0px) rotate(45deg);
    -moz-transform:translateY(0px) rotate(45deg);
    -ms-transform:translateY(0px) rotate(45deg);
    -o-transform:translateY(0px) rotate(45deg);
    transform:translateY(0px) rotate(45deg)
}
#mainNav .hc-io em::after {
    -webkit-transform:translateY(0px) rotate(-45deg);
    -moz-transform:translateY(0px) rotate(-45deg);
    -ms-transform:translateY(0px) rotate(-45deg);
    -o-transform:translateY(0px) rotate(-45deg);
    transform:translateY(0px) rotate(-45deg)
}
.hc-fly {
    width:100%;
    height:100vh;
    position:relative
}
.hc-fly .fly-one {
    width:75%;
    position:absolute;
    left:50%;
    top:20%;
    margin-left:-37%;
    opacity:1
}
.hc-fly .fly-two {
    width:100%;
    height:30vh;
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    background:rgba(252,203,13,.5);
    opacity:1
}
.hc-fly .fly-three {
    height:20px;
    font-size:18px;
    text-align:center;
    color:rgba(255,255,255,.8);
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:25vh;
    letter-spacing:2px
}
.hc-fly .fly-four {
    height:20px;
    font-size:18px;
    text-align:center;
    color:#fff;
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:15vh;
    letter-spacing:2px
}
}

script.js

$(document).ready(function() {
    $(window).on('scroll',
    function() {
        if ($(window).scrollTop() > 100) {
            $('#mainNav').removeClass('hc-top-up').addClass('hc-top-nd');
            $(".hc-logobox img").src;
            $(".hc-logobox img").attr('src', 'images/logo1.png');
        } else {
            $('#mainNav').removeClass('hc-top-nd').addClass('hc-top-up');
            $(".hc-logobox img").src;
            $(".hc-logobox img").attr('src', 'images/logo.png');
        }
    });
    $('#oiBtn').click(function() {
        $('#oiBtn').toggleClass("hc-io"); 
        $('#navBox').toggleClass("hc-navbox01 hc-navbox"); 
        if ($('#navBox').hasClass("hc-navbox01")) {
            $(".hc-logobox img").src;
            $(".hc-logobox img").attr('src', 'images/logo1.png');
        } else {
            $(".hc-logobox img").src;
            $(".hc-logobox img").attr('src', 'images/logo.png');
        }
    });
});
var i = -1;
var timer = 0;
$(document).ready(function() {
    var len = $(".banner li").index();
    var olh = '<li></li>';
    for (var i = 0; i < (len + 1); i++) {
        $("ol").append(olh);
    }
    move();
    timer = setInterval("move()", 4000);
    $(".banner li").hover(function() {
        clearInterval(timer);
    },
    function() {
        timer = setInterval("move()", 4000);
    }); 
    $('.hc-banner ol li').click(function() {
        var ddIndex = $(this).index() - 1;
        i = ddIndex;
        move();
    })
});
var screenWidth = window.screen.width;
function move() {
    i++;
    if (i >= 2) {
        i = 0;
    }
    if (screenWidth >= 1100) {
        $('.hc-fly').css({
            height: "100vh",
            opacity: 0
        });
        if (i < 2) {
            if (i == 0) {
                $('.hc-banner ol li').eq(i).addClass('red').siblings().removeClass('red');
                $('.hc-banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
                $('.hc-fly').animate({
                    height: "45vh",
                    opacity: 1
                },
                2000);
            }
            if (i == 1) {
                $('.hc-banner ol li').eq(i).addClass('red').siblings().removeClass('red');
                $('.hc-banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
                $('.hc-fly').animate({
                    height: "45vh",
                    opacity: 1
                },
                2000);
            }
        }
    } else if (screenWidth <= 768) {
        $('.fly-one').css({
            top: "-20%",
            opacity: 0
        });
        $('.fly-two').css({
            height: "0vh",
            opacity: 0
        });
        $('.fly-three').css({
            left: "-100%",
            opacity: 0
        });
        $('.fly-four').css({
            right: "-100%",
            opacity: 0
        });
        if (i < 2) {
            if (i == 0) {
                $('.hc-banner ol li').eq(i).addClass('red').siblings().removeClass('red');
                $('.hc-banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
                $('.fly-one').animate({
                    top: "30%",
                    opacity: 1
                },
                1000);
                $('.fly-two').animate({
                    height: "30vh",
                    opacity: 1
                },
                1000,
                function() {
                    $('.fly-three').animate({
                        left: "0",
                        opacity: 1
                    },
                    1000);
                    $('.fly-four').animate({
                        right: "0",
                        opacity: 1
                    },
                    1000);
                })
            }
            if (i == 1) {
                $('.hc-banner ol li').eq(i).addClass('red').siblings().removeClass('red');
                $('.hc-banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
                $('.fly-one').animate({
                    top: "30%",
                    opacity: 1
                },
                1000);
                $('.fly-two').animate({
                    height: "30vh",
                    opacity: 1
                },
                1000,
                function() {
                    $('.fly-three').animate({
                        left: "0",
                        opacity: 1
                    },
                    1000);
                    $('.fly-four').animate({
                        right: "0",
                        opacity: 1
                    },
                    1000);
                })
            }
        }
    } else {
        $('.fly-one').css({
            top: "-20%",
            opacity: 0
        });
        $('.fly-two').css({
            height: "0vh",
            opacity: 0
        });
        $('.fly-three').css({
            left: "-100%",
            opacity: 0
        });
        $('.fly-four').css({
            right: "-100%",
            opacity: 0
        });
        if (i == 0) {
            $('.hc-banner ol li').eq(i).addClass('red').siblings().removeClass('red');
            $('.hc-banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
            $('.fly-one').animate({
                top: "30%",
                opacity: 1
            },
            1000);
            $('.fly-two').animate({
                height: "30vh",
                opacity: 1
            },
            1000,
            function() {
                $('.fly-three').animate({
                    left: "0",
                    opacity: 1
                },
                1000);
                $('.fly-four').animate({
                    right: "0",
                    opacity: 1
                },
                1000);
            })
        }
        if (i == 1) {
            $('.hc-banner ol li').eq(i).addClass('red').siblings().removeClass('red');
            $('.hc-banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
            $('.fly-one').animate({
                top: "30%",
                opacity: 1
            },
            1000);
            $('.fly-two').animate({
                height: "30vh",
                opacity: 1
            },
            1000,
            function() {
                $('.fly-three').animate({
                    left: "0",
                    opacity: 1
                },
                1000);
                $('.fly-four').animate({
                    right: "0",
                    opacity: 1
                },
                1000);
            })
        }
    }
}

圖片素材如下

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96627.html

標籤：JavaScript

上一篇：初識 Remax -- "使用真正的 React 構建小程式（1）

下一篇：JS 識別安卓還是ios蘋果、識別是否微信內置瀏覽器、手機型別