Question

我只是想知道当我单击我网站右侧的按钮时如何制作动画以滑动到另一个页面。我希望黑色的页眉和页脚保持一致但是当点击一个按钮时在右边我希望空白区域滑动到下一页。

当我将鼠标悬停在按钮上时，如何显示文字，我似乎无法实现？

以下是我希望提供帮助的人的代码

CSS：

html {
    height: 100%;
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    margin-bottom: 50px;
}

/* Top Black Section */
.top-bar {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: black;
    top: 0px;
    left: 0px;
}
/* Top Black Section */

/* White Area */
.white-content {
    margin-top: 50px;
}
/* White Area */

/* Bottom Black Section */
.bottom-bar {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: black;
    bottom: 0px;
    left: 0px;
}
/* Bottom Black Section */

.ulogo {
    position: fixed;
    height: 40%; 
    background-color: transparent;
    top: 250px; 
    text-align: center;

}
/* Bottom Black Section */

/* Right Navigation */
.right-nav {
    position: fixed;
    right: 0px;
    top: calc(50% - 120px);
}
.right-nav div {
    font-size: 3em;
    color: #C0C0C0 ;
    transition: color .3s;
    cursor: pointer;
}

.right-nav div:hover {
    color: #404040;
}




/* Right Navigation */

HTML：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<title>Upload Festival</title>  
    <head> 
    <!-- CSS -->
    <link href="css/customization.css" rel="stylesheet" style="text/css">
    <!-- CSS -->

    <!-- jQuery&WebFont -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
    <!-- jQuery&WebFont -->
  </head>

<body class="index">
    <!-- Top Border -->
<div class="top-bar"></div>
<!-- Top Border --> 

<!-- White Content -->
<div class="white-content"></div>
<!-- White Content -->

<!-- Bottom Bar -->
<div class="bottom-bar"></div>
<!-- Bottom Bar -->


<!--Buttons-->
<div class="right-nav">
<div id="b1">&bull;</div>
<div id="b2">&bull;</div>
<div id="b3">&bull;</div>
<div id="b4">&bull;</div>
</div>
<!--Buttons-->

<!--Logo div-->
<div class="logo"></div>
<!--Logo div-->

<!--Transition Section-->
<div class="slider"></div>
<!--Transition Section-->

<!-- Logo - Left -->
<img class ="ulogo" src="images/upload-logo.png">
<!-- Logo - Left -->
</body>
</html>

Answer 1

您可以使用单选按钮和兄弟CSS选择器来完成此操作。基本的想法是将按钮和幻灯片放在同一个容器中，这样他们就是兄弟姐妹。

单选按钮可能看起来像：

<label class="radiolabel b1" for="b1">&bull;</label>
<input type="radio" id="b1" name="nav-buttons" class="button-radio" />

按钮标签仍然可以定位在您现在拥有导航区域的位置。

然后将内容放在幻灯片容器中，如：

<div class="slide slide1">...content... </div>

其中第二个类号递增。

然后将它们放在屏幕外：

.slide {
    position: absolute;
    width: 100%;
    top: 0;
    left: -100%;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -ms-transition: left 1s;
    transition: left 1s;
}

现在您可以将它们绑定到以下按钮：

#b1:checked ~ .slide1 {
    left: 0;
}

因此，在这种情况下，当选择第一个单选按钮时，第一张幻灯片将移动到屏幕上。

根据您的需要，您需要根据需要调整其他HTML和CSS。

我在this Fiddle

中做了一个快速而肮脏的例子

Answer 2

我不知道这是不是你想要的，因为我的英语不好......对不起。这是fiddle

我向你的小提琴添加一些JS：

jQuery( document ).ready(function( $ ) {
$('.right-nav div').click(function() {
    var id = $(this).attr('id');
    $('.slide').removeClass('active');
    if ( id == 'b1' ) {
        $('.sl1').addClass('active');
    }
    else if ( id == 'b2' ) {
        $('.sl2').addClass('active');
    }
    else if ( id == 'b3' ) {
        $('.sl3').addClass('active');
    }
});
});

还有一些CSS给你：

.slider {
    position: relative;
}
.slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 1s ease;
}

.slider .slide.sl1 {
        margin-left:100%;    
}
.slider .slide.sl2 {
        margin-left: 200%;    
}
.slider .slide.sl3 {
        margin-left: 300%;
}
.slider .slide.active {
    margin-left: 0;
}

使用CSS和HTML进行白色幻灯片转换

2 个答案: