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

2020-05-30 101 1

效果图


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>

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);
})
}
}
}

扫描加入网页设计QQ群、建站如此简单

本文地址:https://www.usuuu.com/a/ld6CjDkf