ホームページ > ウェブフロントエンド > jsチュートリアル > 地下鉄路線表示灯の効果を実現するJqueryメソッドsign_jquery

地下鉄路線表示灯の効果を実現するJqueryメソッドsign_jquery

WBOY
リリース: 2016-05-16 16:11:44
オリジナル
1798 人が閲覧しました

この記事の例では、Jquery を使用して地下鉄の路線表示灯の効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

よく地下鉄に乗る友人は、地下鉄が走っているとき、緑色の表示灯が一方の方向からもう一方の方向に往復し続け、私がずっと望んでいた駅に到着するまで止まらないことに気づいたはずです。このような効果を実現します。今日慎重に検討した結果、ようやくヒントが得られ、いくつかの結果が得られました。まだ最適化の余地がありますが、最初にコードを投稿します。ただし、コメント内のコードに問題があります。最後のインデックスに到達すると、色はインデックス 0 に再度追加されますが、2 回目の実行後はインデックス 0 から開始されません。興味のある方は改善してください。

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


<頭>

jquery 地下鉄路線インジケーター

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
varindex=0;
setInterval(function(){
$("li").eq(index).addClass("hover").siblings().removeClass("hover");
if(index==13){
インデックス=0
//コードに問題があります。最後のインデックスに到達すると、インデックス 0 が再実行され、色の追加が開始されますが、2 回目の実行以降はインデックス 0 から始まりません。問題は嘘です。興味のある友達がそれを改善してくれるでしょう。
$("li").eq(index).addClass("hover").siblings().removeClass("hover");
}
},400)
})




jQuery インジケーター





  • 0

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11




この記事が皆さんの jQuery プログラミングに役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート