jQuery_jquery によって実装されるグラフィックおよびテキスト情報の下方向のスクロール効果

Web ページには、Weibo の更新、残りのチケット情報、トラフィック監視、その他の一般的なリアルタイム データのスクロール効果など、Web サイトの最新情報を表示する必要があります。jQuery を使用して、フロントエンドの情報スクロールを実現できます。効果。この記事では、jQuery を使用してグラフィック情報とテキスト情報のスクロール効果を実現する方法を例を使用して説明します。

Sina Weibo の情報スクロールを背景として使用します。HTML には複数の Weibo グラフィックとテキスト情報が含まれています。

<div id="con"> 
  <ul> 
    <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/ 
50/1290146312/1" /></a> 
      <h4><a href="#">李开复</a></h4> 
      <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 
境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 
境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> 
    </li> 
    ...更多内容... 
  </ul> 
</div> 

CSS

ページ レイアウトを美しくするために CSS を使用します。もちろん、CSS を変更してさまざまな外観効果をカスタマイズすることもできます。

ul,li{ list-style-type:none;} 
#con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative; 
border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;} 
#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} 
#con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; } 
#con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;} 
#con ul li h4{height:22px; line-height:22px; margin-left:60px} 
#con ul li p{ margin-left:60px;line-height:22px; } 

jQuery

原理: スクロール関数 scrtime() を定義します。マウスがスクロール領域に移動すると、スクロールが停止します (つまり、scrtime がクリアされます)。 )、最後の li 要素は最初の li 要素の上に定期的に挿入され、animate メソッドを使用して li の高さと透明度を変更してアニメーションの読み込み効果を実現し、3 秒ごとにスクロールを実行します。

$(function(){ 
  var scrtime; 
  $("#con").hover(function(){ 
     clearInterval(scrtime);//停止滚动 
  },function(){ 
    scrtime = setInterval(function(){ 
        var ul = $("#con ul"); 
        var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度 
        ul.animate({marginTop : liHeight+40 +"px"},1000,function(){ 
          ul.find("li:last").prependTo(ul) 
          ul.find("li:first").hide(); 
          ul.css({marginTop:0}); 
          ul.find("li:first").fadeIn(1000); 
        });     
    },3000); 
   }).trigger("mouseleave"); 
}); 

上記のコードは、下にスクロールし続けるコンテンツの効果を実装しており、コンテンツは 3 秒ごとに上からフェードインして、コンテンツのスクロール効果を完成させます。

サプリメント

画像の自動角丸めについては、柔軟に使用でき、さまざまなブラウザと互換性のある jquery.corner.js プラグインを使用できます。このプラグイン ダウンロード パッケージは、あなたのために用意されています。もちろん、css3 を使用して角丸を制御することもできます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。