我只是想知道我如何只滚动一个div就可以改变整个div。

实际上,在我的网站(http://codinghub.ga/development.html)中,我在不同的div中都有内容。我只想滚动一次即可移动整个div。就像在https://www.kingoapp.com/中一样,以及在此网站中如何突出显示活动div。

最佳答案

FullPage.js

一个简单易用的插件来创建全屏滚动网站(也称为单页网站或一页网站)。它允许创建全屏滚动网站,以及在网站的各个部分中添加一些横向滑块。

范例:



$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    css3: true
  });
});

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p, h2{
	font-size: 2em;
}
h2{
	color:inherit;
}
.section{
	text-align:center;
}
#menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}
#section0 img,
#section1 img{
	margin: 20px 0 0 0;
}
#section2 img,
#section3 img{
	margin: 20px 0 0 52px;
}

<link href="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<ul id="menu">
  <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third section</a></li>
  <li data-menuanchor="4thpage"><a href="#4thpage">Fourth section</a></li>
</ul>
<div id="fullpage">
  <div class="section active" id="section0">
    <h1>Single Page Demo</h1>
    <img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
  </div>
  <div class="section" id="section1">
    <div class="slide active">
      <div class="intro">
        <h1>Create Sliders</h1>
        <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
      </div>
    </div>
    <div class="slide">
      <div class="intro">
        <img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
        <h1>Simple</h1>
        <p>Easy to use. Configurable and customizable.</p>
      </div>
    </div>
    <div class="slide">
      <div class="intro">
        <img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
        <h1>Cool</h1>
        <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
      </div>
    </div>
    <div class="slide">
      <div class="intro">
        <img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
        <h1>Compatible</h1>
        <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
      </div>
    </div>
  </div>
  <div class="section" id="section2">
    <div class="intro">
      <h1>Easy to use plugin</h1>
      <p>HTML markup example to define 4 sections.</p>
      <img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
    </div>
  </div>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Working On Tablets</h1>
    </div>
    <img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
  </div>
</div>





您能检查一下上面的代码片段吗?我认为这对您更有帮助。

09-11 19:03
查看更多