自分で作ったウェブサイトに基づいて、あなたは誰を知っています:)
かつて私はそのような効果を見ました-サイトの左側にリンクがあり、クリックすると、サイトのコンテンツ領域は指定された識別子にスムーズに移動します。 私はその効果を思い出しました-私はそれを繰り返すことにしました。
スムーズな移動を実装するには、jQueryが必要でした。
ちょっとした理論：
この効果は、配置するコンテンツの領域に「ウィンドウ」（正直なところ、 j4ckが示唆するように他の人が何と呼ぶかわからない- ビューポート ）を配置することで実現されます。
「ウィンドウ」領域は任意に設定できます。
写真
練習する
グリッドを作成します。
< div id ="small" >
< div id ="big" >
< div class ="workplace" id ="wp_01" >
< p > </ p >
</ div >
< div class ="workplace" id ="wp_02" >
< p > </ p >
</ div >
< div class ="workplace" id ="wp_03" >
< p > </ p >
</ div >
< div class ="workplace" id ="wp_04" >
< p > </ p >
</ div >
</ div >
< ul id ="links" " >
< li >< a href ="#" id ="go" onclick ="return moveTo('wp_01', 'big');" > 1 </ a ></ li >
< li >< a href ="#" id ="go2" onclick ="return moveTo('wp_02', 'big');" > 2 </ a ></ li >
< li >< a href ="#" id ="go3" onclick ="return moveTo('wp_03', 'big');" > 3 </ a ></ li >
< li >< a href ="#" id ="go4" onclick ="return moveTo('wp_04', 'big');" > 4 </ a ></ li >
</ ul >
</ div >
* This source code was highlighted with Source Code Highlighter .
配置のためにスタイルシートをオーバーレイします。
< style >
html {
height: 100%;
}
body {
padding:0; margin:0;
height: 100%;
}
#big{
width: 30000px;
position: absolute;
top: -1000px;
left: -100px;
cursor: move;
}
#small {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: url(img/bg.jpg);
}
#links {
top:10px;
left: 10px;
position: absolute;
width: 75px;
background-color: white;
padding: 5px;
opacity:0.5;
}
div.workplace {
width: 400px;
position: absolute;
cursor:default;
}
#wp_04 {
top:1800px;;
left: 1800px;
}
#wp_03 {
top:1000px;;
left: 1500px;
}
#wp_02 {
top: 200px;;
left: 400px;
}
#wp_01 {
top: 1650px;
left: 800px; }
div.workplace {
font: normal 90% "Trebuschet MS";
color:white;
}
a.act {
font-weight: bold;
text-decoration:none;
}
</ style >
* This source code was highlighted with Source Code Highlighter .
javascript
<script>jQuery.noConflict();</script> /* framework */
<script>
function moveTo(divId, mainId) {
jQuery( "#" +mainId).stop(); /* */
var topIn = jQuery( "#" +divId).css( "top" );
var leftIn = jQuery( "#" +divId).css( "left" );
leftIn = leftIn.replace(/px/, "" );
leftIn = leftIn - 400;
jQuery( "#" +mainId).animate({
top: "-" +topIn,
left: "-" +leftIn
}, 1500 );
return false ;
}
</script>
* This source code was highlighted with Source Code Highlighter .
説明
機能を転送します。
divId-立ち上がるエリアの識別子
mainId-コンテンツ識別子
animateを使用して、指定した要素にコンテンツ領域をスムーズに移動します。
実際にはすべて。
例： http : //htmllancer.tu2.ru/workarea.html
記事1-キックしないでください:)
UPD：画面の高さに合わせて再編集。
UPD2：アニメーションを停止しました。10回クリックすると、エリアは10回移動しません。