2012-05-08 10 views
-1

これは私が元のサイトを見つけることができない場所にあるコードです。jquery.scrollTo.jsは5 divs以上スライドしていません

jqueryの-1.3.1.min.js

jquery.scrollTo.js

私はこのサイト上でそれを実行しています:http://www.atomicorchid.co.za/Atomic_Orchid/new/

それだけスクロール5つのdiv?深い研究は、単に答えを見つけ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Scroll vertically</title> 

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

<script> 

$(document).ready(function() { 

$('a.panel').click(function() { 

    $('a.panel').removeClass('selected'); 
    $(this).addClass('selected'); 

    current = $(this); 

    $('#wrapper').scrollTo($(this).attr('href'), 800);  

    return false; 
}); 

$(window).resize(function() { 
    resizePanel(); 
}); 

}); 

function resizePanel() { 

width = $(window).width(); 
height = $(window).height(); 

mask_height = height * $('.item').length; 

$('#debug').html(width + ' ' + height + ' ' + mask_height); 

$('#wrapper, .item').css({width: width, height: height}); 
$('#mask').css({width: width, height: mask_height}); 
$('#wrapper').scrollTo($('a.selected').attr('href'), 0); 

} 

</script> 

<style> 

body { 
height:100%; 
width:100%; 
margin:0;padding:0; 
overflow:hidden; 
} 

#wrapper { 
width:100%; 
height:100%; 
position:absolute; 
top:0;left:0; 
background-color:#ccc; 
overflow:hidden; 
} 


#mask { 
    width:100%; 
    height:500%; 
    overflow:hidden; 
    background-color:#eee; 
} 

.item { 
    width:100%; 
    height:20%; 
    display:block; 
    background-color:#ddd; 
} 


.content { 
    width:400px; 
    height:300px; 
    top:20%; 
    margin:0 auto; 
    background-color:#aaa; 
    position:relative; 
} 

.selected { 
    background:#fff; 
    font-weight:700; 
} 

</style> 
</head> 
<body> 


<div id="wrapper"> 

<div id="mask"> 

<div id="item1" class="item"> 
<div class="content">item1 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div> 
</div> 

<div id="item2" class="item"> 
<a name="item2"></a> 
<div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div> 
</div> 

<div id="item3" class="item"> 
<a name="item3"></a> 
<div class="content">item3 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div> 
</div> 

<div id="item4" class="item"> 
<a name="item4"></a> 
<div class="content">item4 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div> 
</div> 

<div id="item5" class="item"> 
<a name="item5"></a> 
<div class="content">item5 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div> 
</div> 

<div id="item6" class="item"> 
<a name="item6"></a> 
<div class="content">item6 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div> 
</div> 

</div> 

</div> 

</body> 
</html> 
+3

他の人があなたを助けることができるようにhttp://jsfiddle.net/ –

+0

あなたは、さらにあなたの問題を説明することはできますか?、JsFiddleを作りますか私は無限のスライドを見ることができる、素敵な音楽backgoundを聞くことができます。あなたのサイトに問題はありません。あなたの問題をはっきりと説明してください。 – Libin

+0

ウェブサイトには6つのメニュータブがあります。スライドはプレス&編集者のみが連絡先になり、連絡先に行くリンクは削除されます。 私は元のスクリプトでもそれを試しましたが、成功しませんでしたか? jquery.scrollTo.jsの一部が粗いと思います。 これはjsfiddle:(http://jsfiddle.net/Drakinfly/DhBSZ/)へのリンクです。 jsfiddleを使用してjquery.scrollTo.js jsfiddleを初めて追加する方法がわかりません。 – Drakinfly

答えて

1

1時間後:

これは元のコードです。 CSSの#maskからoverflow:hidden;を削除します。 jsfiddle exampleとあなたのウェブサイトでもうまくいきました。

+1

+1時間が大変貴重な時間なので、 –

+0

@Elliotありがとうございました:) – Libin

+0

大変ありがとうございました。私はCSSではなくJavaScriptを使って周りにいるようにしていました – Drakinfly

関連する問題