创意网站导航和轮播图欣赏

index.html

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>index</link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"><!-- 百度cdn的bootstrap -->
    ="css/reset.css"="css/style.css"bodybody 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)"="hc-logoBox"><img src="images/logo.png" /></a="navbar-right hc-contact p768">
                ="#">微信>博客div="oiBtn"="hc-oi p1100"em></ul ="navBox"="nav navbar-nav navbar-right hc-navBox"li>
                    ="nav-on"="nav-off">首页>About Us>关于我们>News>新闻资讯>Services>服务内容>Project>经典案例>Contact Us>联系我们>Support>技术支持ulnav>

     banner轮播图 section ="hc-banner"ol="banner"li ="hc-bannerbg" style="background-image: url(images/banner01.jpg);"="hc-fly"="fly-one" src="images/super-H.png" />
                    ="fly-two"p ="fly-three">Innovative thinking new ideas perfect designp="fly-four">创新思維 新颖理念 完美设计="background-image: url(images/banner02.jpg);"sectionscript ='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'script="js/script.js"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:
input,textarea {
    outline-style:none
}
fieldset,img {
    border:
address,caption,cite,code,dfn,em,strong,var {
    font-weight:400;
    font-style:normal
}
ol,ul {
    list-style:
caption,th {
    text-align:left
}
h1,h6 {
    font-size:100%
}
q:before,q:after {
    content:''
}
abbr,acronym {
p {
    word-wrap:break-word
}
a:active {
    text-decoration:none!important
}
a:hover {
a:link {
a:visited {
a {
* {
    font-family:微软雅黑
}
.ff_song {宋体
}
.f_left {
    float:left;
.f_right {right;0
}

style.css

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

script.js

$(document).ready(function() {
    $(window).on('scroll',() {
        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'logo.png');
        }
    });
    $('#oiBtn').click(() {
        $('#oiBtn').toggleClass("hc-io"); 
        $('#navBox').toggleClass("hc-navBox01 hc-navBox"); 
        if ($('#navBox').hasClass("hc-navBox01")) {
            $(".hc-logoBox img" {
            $(".hc-logoBox img");
        }
    });
});
var i = -1;
var timer = 0;
$(document).ready(() {
    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(() {
        clearInterval(timer);
    },1)">() {
        timer = setInterval("move()",1)">);
    }); 
    $('.hc-banner ol li').click(var ddIndex = $(this).index() - 1;
        i = ddIndex;
        move();
    })
});
var screenWidth = window.screen.width;
 move() {
    i++if (i >= 2) {
        i = 0;
    }
    if (screenWidth >= 1100) {
        $('.hc-fly').css({
            height: "100vh"
        });
        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"
                },2000);
            }
            if (i == 1);
            }
        }
    } else if (screenWidth <= 768) {
        $('.fly-one').css({
            top: "-20%"
        });
        $('.fly-two').css({
            height: "0vh"
        });
        $('.fly-three').css({
            left: "-100%"
        });
        $('.fly-four').css({
            right: "-100%").siblings().fadeOut();
                $('.fly-one').animate({
                    top: "30%");
                $('.fly-two').animate({
                    height: "30vh"() {
                    $('.fly-three').animate({
                        left: "0"
                    },1)">);
                    $('.fly-four').animate({
                        right: "0");
                })
            }
            );
                })
            }
        }
    }  {
        $('.fly-one') {
            $('.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%"
            },1)">);
            $('.fly-two').animate({
                height: "30vh"() {
                $('.fly-three').animate({
                    left: "0");
                $('.fly-four').animate({
                    right: "0");
            })
        }
        );
            })
        }
    }
}

图片素材如下

创意网站导航和轮播图欣赏

猜你在找的JavaScript相关文章