jQuery_jquery로 구현한 그래픽 및 텍스트 정보의 아래쪽 스크롤 효과

WEB 페이지는 Weibo 업데이트, 남은 티켓 정보, 트래픽 모니터링 및 프로젝트의 기타 일반적인 실시간 데이터 스크롤 효과와 같은 웹사이트의 최신 정보를 표시해야 합니다. 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 코드입니다. 물론 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이 지워짐). 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를 사용하여 둥근 모서리를 제어할 수도 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.