河北高端网站制作：如何使用jQuery构建滑动一页组合

2019.06.03 河北高端网站制作

159

河北高端网站制作在本教程中，我将向您展示如何使用jQuery创建一个有趣的滑动一页组合。一个页面网站通常是一个很好的方式来向你的潜在客户展示你做的事情有多好。这个也不例外。

河北高端网站制作

HTML

我们将从一些简单的HTML开始。

<div id="main"><section id="box1" class="box"></section><section id="box2" class="box"></section><section id="box3" class="box"></section><section id="box4" class="box"></section><section id="box5" class="box"></section><section id="box6" class="box"></section><section id="box7" class="box"></section><section id="box8" class="box"></section><section id="box9" class="box"></section></div>

各section表示所有有色方块的一部分。每一个都有一个不同的ID，这样我们就可以对不同的背景色进行样式设计。

接下来，我们将导航栏添加到每个部分：

<div id="main"><section id="box1" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box2" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box3" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box4" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box5" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box6" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box7" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box8" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section><section id="box9" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav></section></div>

一旦我们有了它，我们就可以向每个部分添加一些示例内容。

<div id="main"><section id="box1" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav>


	<h2>John Smith</h2>
	<h3>
	Welcome to the portfolio of the great John Smith!	</h3></section><section id="box2" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h3>Contact Me</h3><p><ul class="contentul"><li>Phone number: (123) 456 7890</li><li>Fax: (123) 456 7890</li><li>Email: johnsmith@johnsmith.com</li></ul></p></section><section id="box3" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>About</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section><section id="box4" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>Services</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section><section id="box5" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>Why hire me?</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section><section id="box6" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>Awards</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section><section id="box7" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>Portfolio</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section><section id="box8" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>Clients</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section><section id="box9" class="box"><nav><ul><li id="link1"><a href="#">Home</a></li><li id="link2"><a href="#">Contact</a></li><li id="link3"><a href="#">About</a></li><li id="link4"><a href="#">Services</a></li><li id="link5"><a href="#">Why hire me?</a></li><li id="link6"><a href="#">Awards</a></li><li id="link7"><a href="#">Portfolio</a></li><li id="link8"><a href="#">Clients</a></li><li id="link9"><a href="#">Resume</a></li></ul></nav><h2>Resume</h2><p>Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.</p></section></div>

精彩的，令人惊奇的!现在我们有了HTML基础，我们可以继续使用CSS，这将使它看起来很好。

CSS

我们将从一些通用造型开始。

body {font-family: arial;font-size: 15px;overflow: hidden;}h2 {color: #ffffff;text-align: center;font-family: Verdana;font-size: 54px;margin-top: 50px;}h3 {color: #ffffff;text-align: center;font-family: Verdana;font-size: 16px;margin-top: 20px;}p {color: #ffffff;text-align: center;font-family: arial;font-size: 16px;line-height: 24px;margin-top: 20px;}.contentul {text-align: center;font-size: 16px;line-height: 24px;color: #ffffff;}

只是简单的文字造型。“.contentul”样式用于非导航部分中的任何无序列表。

接下来，我们来设计肚脐吧。

nav {height: 50px;width: 100%;}nav ul li {height: 50px;width: 11.1%;text-align: center;float: left;}nav ul li a {text-decoration: none;color: #ffffff;line-height: 50px;display: block;}#link1 {background: #fe4632;}#link2 {background: #005fe5;}#link3 {background: #ffb40a;}#link4 {background: #80bf34;}#link5 {background: #26bfa3;}#link6 {background: #2d93cf;}#link7 {background: #ab250f;}#link8 {background: #e99702;}#link9 {background: #9adf56;}

再说一次，非常简单。每个部分中都有一个“nav”元素，其中包含一个无序的列表，其中充满了链接。每个链接占导航的11.1%，因此它最终几乎延伸到用户当前所在的部分的末尾。每个链接都有一个与链接所指向的部分对应的不同的背景色。

现在，各部分。

.box {float: left;}#box1 {background: #fe4632;}#box2 {background: #005fe5;}#box3 {background: #ffb40a;}#box4 {background: #80bf34;}#box5 {background: #26bfa3;}#box6 {background: #2d93cf;}#box7 {background: #ab250f;}#box8 {background: #e99702;}#box9 {background: #9adf56;}

每个方框都会向左浮动，这样它们就会在水平和垂直方向上彼此并排。每种颜色都有不同的背景色。

对CSS来说就是这样了。接下来是jQuery，它将为整个过程提供动力。

jQuery

在我们深入研究代码之前，我将解释它是如何工作的。在加载文档时，将运行一个“regzeBox”函数，该函数将调整框的大小，使其大小与用户的视口大小相同。每当调整窗口大小时，相同的函数就会运行。当单击链接时，“主”div的边距顶部和边距左侧将被动画化，以便用户最终看到我们希望他们看到的部分。我们将有一个整洁的“Goto”功能来驱动它。

这是基本模板，稍后我们将用一些代码填充它。

$(document).ready(function(){
		function resizeBoxes() {}
		resizeBoxes();
		$(window).resize(function() {
	resizeBoxes();});$('nav ul li a').click(function(){
	return false;});function goTo(horizontal,vertical) {
	}
		});

现在我们已经有了框架，我们可以开始编写实际的函数了。

function resizeBoxes() {var browserWidth = $(window).width();var browserHeight = $(window).height();
		$('#main').css({
	width: browserWidth*3,});
		
		$('.box').css({
	width: browserWidth,
	height: browserHeight,});}resizeBoxes();
		$(window).resize(function() {
	resizeBoxes();});$('nav ul li a').click(function(){
	return false;});

在这个函数中，“main”被调整为仅适合每个框的大小，这样就有一个3×3的网格，并且每个框都调整到视口的大小。然后，我们执行函数。还有一个浏览器调整大小处理程序，每当用户的浏览器被调整大小时，它会重新计算每个框的大小。最后，对于每个nav链接都有一个返回false，这样浏览器就不会实际跟踪每个链接。

接下来，我们有了“goto”函数。

function goTo(horizontal,vertical) {

	var browserWidth = $(window).width();
	var browserHeight = $(window).height();

	$('#main').animate({
		marginLeft: '-'+browserWidth*horizontal,
		marginTop: '-'+browserHeight*vertical,
	}, 1000);
	}

该函数获取视口维度，并将它们写入2个变量。然后，它将“main”元素的边距动画化，以便用户最终看到我们希望他们看到的部分。

最后，我们必须为每个导航链接添加单击函数。

$('#link1 a').click(function(){
	goTo(0,0);});$('#link2 a').click(function(){
	goTo(1,0);});$('#link3 a').click(function(){
	goTo(2,0);});$('#link4 a').click(function(){
	goTo(0,1);});$('#link5 a').click(function(){
	goTo(1,1);});$('#link6 a').click(function(){
	goTo(2,1);});$('#link7 a').click(function(){
	goTo(0,2);});$('#link8 a').click(function(){
	goTo(1,2);});$('#link9 a').click(function(){
	goTo(2,2);});

因为我们有“goto”函数，所以我们节省了计算每个单击函数的麻烦。我们还减少了所需代码的数量。精彩的，令人惊奇的!

本教程就是这样。如果您有任何问题或评论，评论表格如下。


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP