jquery に基づくコンテンツサイクルスクロール小型モジュール (Sina Weibo のログなしホームページスクロール Weibo 表示の模倣)

jquery に基づくコンテンツサイクルスクロール小型モジュール (Sina Weibo のログなしホームページスクロール Weibo 表示の模倣)_jquery

WBOY

リリース： 2016-05-16 18:09:03

オリジナル

1079 人が閲覧しました

要件に関して、この関数は最新の Weibo データをリアルタイムで呼び出す必要があります。フロントエンド開発に関する限り、要件は次のように分割できます。
1 コンテンツはスクロールし続けます。新しい Weibo には次の Weibo が含まれます。最初に押してからフェードインします。
3 マウスがコンテンツの上を通過するとスクロールを一時停止します。
4 コンテナの下部のグラデーションが背景色の下に消えます。
上記 4 つの要件のうち、要件 1 ～ 3 は js テクノロジによって実装され、要件 4 は css テクノロジによって実装されます。以下、要件について 1 つずつ説明します。
要件 1 と 2: コンテンツの連続スクロールの要件は、前の記事「小さなモジュール: アナウンスのスクロールと一時停止」で紹介された機能と似ています。この機能は、CSS の位置決めを使用して全体の動きを制御します。 ULリストのアニメーション。要件 2 と組み合わせると、より単純なものを記述し、最初の li 要素の上に最後の li 要素を定期的に挿入し、その後 animate メソッドを使用して li の高さと透明度を変更することができます。一時停止せずにスクロールするには、引き続き setTimeout メソッドを使用する必要があります。新しいデータが読み込まれていない場合、制限されたコンテンツループのスクロールを実現します。
要件 3: マウスをホバーしたときに一時停止するという要件により、マウスがホバーしたときに特定の属性の値が要素に追加されます。この値が存在するかどうかを判断するためにここで name 属性が使用されます。コードは実行されません。
要件 4: これは、コンテンツにグラデーションの png24 画像をオーバーレイすることで実現できます。IE6 は png24 を十分にサポートしていません。パフォーマンスを考慮する必要がある場合は、IE6 の display:none のハックをこのコンテナに追加します。次の問題は、テキストを覆う画像の問題を解決することです。このとき、この属性の値を none に設定した後、特別な CSS 属性「pointer-events」が必要になります。、マウスは通過できますテキストの上に完全に配置された画像は、その下のテキストを選択します。
包括的なコードは次のとおりです:
HTML

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

/li>

CSS

コードをコピーしますコードは次のとおりです: .messagewrap{overflow:hidden;position:relative;width:500px;height:300px}

li{ height:50px;}

.bottomcover{width:500px ;height:45px;position:absolute;bottom:0;left:0; 
pointer-events:none;background:url(halftransp.png) 左下no-repeat; 
/*背景色から上に上がるグラデーション透明画像*/ _display:none;/*IE6 エクスペリエンス用にダウングレード*/} 

 
JS 

コードをコピーコードは次のとおりです。

$(function(){ msgmove();

$("ul").hover(function( ){ 
$(this).attr("name","hovered"); //マウスを設定すると、名前がul の値は "hovered" 
}, function(){ 
$(this) .removeAttr("name") 
}); { 
var isIE=!!window.ActiveXObject; 
var isIE6=isIE&&!window.XMLHttpRequest; 
if($("ul").attr("name") != "hovered"){ 
//ul の name 属性が「ホバー」されているかどうかを判断し、マウスがその上を通過したときにスクロールを一時停止するかどうかを決定します。 
var height = $("li:last").height(); 
if(isIE6){ 
//IE6 を判断、jQuery のアニメーションと不透明度の透明度を併用すると IE6 に表示される現象、
//したがって、IE6 では透過的に無効になります。 
$("li:last").css({"高さ":0}); 
}else{ 
$("li:last").css({"不透明度":0, "height":0}); 
//リストの最後の li は透明で、高さは 0 に設定されます 
} 
$("li:first").before($("li :last")) ; 
//制限されたリスト項目の無限ループスクロール表示を実現するために、リストの最後の li を先頭に昇格させます 
$("li:first").animate({"height": height},300); 
//リストの先頭の li の高さが徐々に高くなり、下の li が押し下げられます 
if(!isIE6){ 
$("li:first" ).animate({"opacity":"1"} ,300); 
//IE6 以外のブラウザで透明なフェードイン効果を設定します
} 
} 
setTimeout("msgmove() ",5000); 
//1 回 5 秒のスクロールを設定します
} 
 