ホームページ > 記事 > ウェブフロントエンド > jquery_jquery によって実装されたナビゲーションスクロール効果の特定のコード

jquery_jquery によって実装されたナビゲーションスクロール効果の特定のコード

WBOYオリジナル: 2016-05-16 17:33:19983ブラウズ

キャンパスビデオ Web サイトを構築していたとき、ホームページにスクロール効果を実現する必要があるナビゲーションページがありました。サンプルはありましたが、コードを理解するのが難しく、Web デザインでは自分のコードしか理解できないようでした。なので、他人のエフェクトを真似して自分で作ってみましたが、見た目は比較的スムーズで、オリジナルと比べても遜色ありません。

ここでコードをコピーし、後で変更を 1 つずつ簡略化します:
スクロール効果を実現するには、スクリプトコードは次のとおりです:

コードをコピーしますコードは次のとおりです:

var all=0; 
var no=0; 
$(document).ready( function(){ 
all=$('.slide').length; 
s_width=$('.slide').eq(0).width() ; 
$("#slides" ).css('width',all*s_width); 
var contiar=$('.control_links'); ;i ){ 
contiar.append ("
"); 
} 
$('.control_links li').bind('click Mouseenter',function() { 
var index=$(this ).index(); 
no_= no%all; 
$("#slides").animate( -1*no_*s_width) 'px' },200); 
$(this).css('background-color','#fff'); 
$(this).siblings().css ('背景色','#333 '); 
}); 
setInterval(){ 
var no_= no%all; 
$("#slides").animate ({left:(-1*no_* s_width) 'px'},1000); 
var curr= $('.control_links li').eq(no_); 
curr.css('background- color','#fff') 
curr.siblings().css('background-color','#333'); 
いいえ ; 
}); 


css コードは次のとおりです: 

コードをコピー

コードは次のとおりです: img{ border:none;

#daohangpic {

width:1000px;
padding:20px; >オーバーフロー:非表示;
#daohangpic img {
高さ:380px;
幅:980px;

#contiar {
位置:相対;
幅:980px;
高さ:380px;
オーバーフロー:非表示;
#slides {
位置:絶対; :none;
}
.slide {
float:left;
height:380px;
border:none; >}
.control_links{
position:absolute;
right:10px;
z-index:200; li {
リストスタイル:
}
.control_links li {
幅: 15 ピクセル;
高さ: 15 ピクセル; 5px;
テキスト整列: 中心;
背景: 1px ソリッド #666;
不透明度: 0.5; .caption {
位置:絶対;
高さ:100%;
下:0px; ;
パディングトップ:10px;
z-index:100;
背景:url(hdpng.png) 繰り返しなし
}
.caption h2 {
color: #FFF;
font-size: 17px;
line-height: 25px; p{
表示: ブロック;
カラー: #767676 ;
行の高さ:15px;

スクロールする対象は次のように定義されます:

コードをコピー

コードは次のとおりです: