0
создать веб-страницу, которая прокрутки по горизонтали от http://www.pixxelfactory.net/jInvertScroll/Горизонтальная прокрутка, когда щелчок по ссылке
но теперь я создать строку меню, когда я щелкните на меню бара, в Прокрутим слева Div мой код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Hot Air Balloon</title>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" href="css/jInvertScroll.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" >
function changeonhover(a)
{
for(var i =1 ;i<=4;i++)
{
if(i==a)
{
document.getElementById("link"+i).style.color = "blue";
}
else
{
document.getElementById("link"+i).style.color = "white";
}
}
}
</script>
<style type="text/css">
#header {
position: fixed;
top: 0;
z-index: 500;
height: 45px;
}
</style>
</head>
<body>
<div id="header">
<a href="#div1" id="link1" >Div1 </a>
<a href="#div2" id="link2" >Div2 </a>
<a href="#div3" id="link3" >Div3 </a>
<a href="#div4" id="link4" >Div4 </a>
</div>
<div class="container">
<!--<div class="horizon scroll">
<img src="images/background.png" alt="" />
</div>
<div class="middle scroll">
<img src="images/cloudsandballoons.png" alt="" />
</div>
<div class="panel1">
-->
<div class="front scroll">
<h1 class="intro">Scroll down</h1>
<div id="div1" onmouseover="changeonhover('1')" class="panel1 page">
<h2>The Hot Air Balloon</h2>
<p>
The hot air balloon is the oldest successful human-carrying flight technology. It is part of a class of aircraft known as balloon aircraft.
</p>
<p>
On November 21, 1783, in Paris, France, the first untethered manned flight was performed by Jean-François Pilâtre de Rozier and François Laurent d'Arlandes in a hot air balloon created on December 14, 1782 by the Montgolfier brothers. Hot air balloons that can be propelled through the air rather than just being pushed along by the wind are known as airships or, more specifically, thermal airships.
</p>
</div>
<div id="div2" onmouseover="changeonhover('2')" class="panel2 page">
<h2>How they work</h2>
<p>A hot air balloon consists of a bag called the envelope that is capable of containing heated air. Suspended beneath is a gondola or wicker basket (in some long-distance or high-altitude balloons, a capsule), which carries passengers and (usually) a source of heat, in most cases an open flame.
</p>
<p>
The heated air inside the envelope makes it buoyant since it has a lower density than the relatively cold air outside the envelope.
</p>
</div>
<div id="div3" onmouseover="changeonhover('3')" class="panel3 page">
<h2>Practicalities</h2>
<p>As with all aircraft, hot air balloons cannot fly beyond the atmosphere. Unlike gas balloons, the envelope does not have to be sealed at the bottom since the air near the bottom of the envelope is at the same pressure as the air surrounding.
</p>
<p>
For modern sport balloons the envelope is generally made from nylon fabric and the inlet of the balloon (closest to the burner flame) is made from fire resistant material such as <a href="http://en.wikipedia.org/wiki/Nomex">Nomex</a>. </p>
</div>
<div id="div4" onmouseover="changeonhover('4')" class="panel4 page">
<h2>Modern ballooning</h2>
<p>
Beginning during the mid-1970s, balloon envelopes have been made in all kinds of shapes, such as rocket ships and the shapes of various commercial products, though the traditional shape remains popular for most non-commercial, and many commercial, applications.
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
, но когда я нажимаю ссылку, я не работаю. пожалуйста, помогите мне
что вы хотите скажите? – user3163213
, когда я нажимаю на ссылку, это будет анимировать, но не пойти в div .. –
вы хотите горизонтальную веб-страницу?, которая отображает содержимое страницы на клик? вам может потребоваться содержимое страницы в div и скрыть их с помощью CSS. .если при нажатии на пункты меню отображаются их через jquery –