Question

我一直在尝试为我的角色扮演用户制作一个迷你网站模板，用作他们的角色资料。我决定以幻灯片方式进行交易，我正在使用Ajax的“jquery full-page”。

目的是为用户提供一个“单页”导航的“迷你网站”，他们可以根据需要随时更改。我在Enjin托管，因此，我需要用户可以访问的内容而不给予每个人管理员权限。有了这个Jquery整页，我就可以做到。

页面如下： 1ST PG-着陆页的排序。（炉膛） 2ND PG-开始滑动..后面的每一页都是幻灯片的另一部分。我希望能够在这些幻灯片部分的背景上添加图像和文本滚动框。

EX。第2页是外观pg。此页面需要显示背景以及角色的图像，当然还需要显示相同大小的文本滚动框。所以基本上我需要知道如何在背景上添加分屏，并能够隐藏文本滚动框，直到您实际滚动文本。最后一部分纯粹是美学。

简而言之就是这样。这是我的HTML：

/* full width page default*/
#page{
width:100% !important;
max-width:none !important;
}

/*Remove default padding from html modules*/
.m_html{
padding:0px !important;
}


/*remove all enjin chat and tray icons*/
#enjin-tray-messaging, #enjin-tray {display: none !important;}

#enjin-tray-chatchannels {
display: none;
}

 <!doctype html>
 <html>
 <head>
<script src="jquery-1.11.3.js"></script>
<script src="https://s3.amazonaws.com/files.enjin.com/1252728/fullpage.js/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/files.enjin.com/1252728/fullpage.js/jquery.fullPage.css">
<title>CUS PRO TEST 3</title>

<style>

#navbar {
	width:100%;
	height:30px;
	top:0px;
	position:absolute;
	z-index:999;
	background-color: #000;
	opacity:0.8;
	padding-top: 10px;
}
#navbar a {
	font-family: Arial;
	font-size: 32px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
}
div img {
	width: 1600px;
	height: auto;
}
</style>
</head>

<body>

<div id="navbar">
<a href="#page1">Hearth</a>
<a href="#page2/slide2-1">Appearence</a>
<a href="#page2/slide2-2">Personality</a>
<a href="#page2/slide2-3">History</a>
<a href="#page2/slide2-4">Journal</a>
<a href="#page2/slide2-5">Friends</a>
<a href="#page2/slide2-6">Ooc</a>
<a href="#page2/slide2-7">Courier</a>
</div>

<div id="wrapper">
    <div class="section" data-anchor="page1"><img src="https://s3.amazonaws.com/files.enjin.com/1252728/custom profiles prp/CUS PRO TEST ONE PAGE SITE/1.jpg" /></div>
	<div class="section" data-anchor="page2">
		<div class="slide" data-anchor="slide2-1"><img src="https://s3.amazonaws.com/files.enjin.com/1252728/custom profiles prp/CUS PRO TEST ONE PAGE SITE/2.jpg"   /></div>
		<div class="slide" data-anchor="slide2-2"><img src="https://s3.amazonaws.com/files.enjin.com/1252728/custom profiles prp/CUS PRO TEST ONE PAGE SITE/2-2.jpg" /></div>
		<div class="slide" data-anchor="slide2-3"><img src="/images/2-3.jpg" /></div>
		<div class="slide" data-anchor="slide2-4"><img src="/images/2-4.jpg" /></div>
		<div class="slide" data-anchor="slide2-5"><img src="/images/2-5.jpg" /></div>
		<div class="slide" data-anchor="slide2-6"><img src="/images/2-6.jpg" /></div>
		<div class="slide" data-anchor="slide2-7"><img src="/images/2-7.jpg" /></div>
	</div>
	</div>

<script>
$(document).ready(function(){
	$('#wrapper').fullpage({
		 scrollingSpeed: 300,
		 controlArrows: false
	});
});
</script>
</body>
</html>

如何将分屏（“50％图像/ 50％文本滚动框”）添加到全屏幻灯片图像？

0 个答案: