1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITRE</title>
<!-- Link -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Réaliser un Splachscreen à la façon Apple : HTML, CSS, JS</title>
<script src="jquery.splashscreen.js"></script>
<script>
$(document).ready(function(){
$('#demoImg').splashScreen({textLayers : [
'images/page2.png',
'images/page3.png'
]});});
</script>
<style type="text/css">
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#6c3306;
background-repeat:no-repeat;
text-align:center;
}
#demoImg{
background:url('images/page1.png');
text-align:center;
}
</style>
</head>
<body>
<div id="demoImg"></div>
<!-- /PAGE -- HOME -->
<div data-role="page" id="Accueil">
<!-- Header -->
<div data-role="header" data-theme="a" >
<h1>Titre</h1>
</div>
<!-- Content -->
<div data-role="content">
<div data-role="main" class="ui-content" data-theme="a" data-content-theme="a">
<ul data-role="listview">
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
</ul>
</div>
</div>
<!-- Footer -->
<div data-role="footer" data-theme="a" data-position="fixed" data-id="foot">
<div data-role="navbar">
<ul>
<li><a href="#Page1" data-role="button">Page1</a></li>
<li><a href="#Page2" data-role="button">Page2</a></li>
</ul>
</div>
</div>
</div>
</body>
</html> |
Partager