jQuery 에서 실 현 된 텍스트 한 줄 씩 위로 스크롤 효과 예시

5663 단어 jQuery문자.굴러가다
본 고의 실례 는 jQuery 가 실현 한 문자 가 한 줄 한 줄 위로 간헐 적 으로 굴 러 가 는 효 과 를 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
실행 효과 그림 은 다음 과 같 습 니 다:

구체 적 인 코드 는 다음 과 같다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery          </title>
<link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{ margin:0px; padding:0px; font-family:'    '; -webkit-tap-highlight-color:rgba(0,0,0,0); }
li{ list-style:none }
img{ border:none}
a{text-decoration:none;}
/* -------------------------     ----------------------------------- */
.Top_Record{}
.record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div{ float:left;}
.topRec_List li div:nth-child(1){ width:17%;}
.topRec_List li div:nth-child(2){ width:18%;}
.topRec_List li div:nth-child(3){ width:25%;}
.topRec_List li div:nth-child(4){ width:40%;}
.apple a{display:block; text-decoration:none;}
.apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
.apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
.aa {word-wrap:break-word;line-height:50px; color:#1B96EE;}
</style>
</head>
<body>
<div class="Top_Record">
  <div class="record_Top">     </div>
  <div class="topRec_List">
    <dl>
      <dd>  </dd>
      <dd>  </dd>
      <dd>  </dd>
      <dd>  </dd>
    </dl>
    <div class="maquee">
      <ul>
        <li>
          <div>1</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>2</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>3</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>4</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>5</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>6</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>7</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>8</div>
          <div> **</div>
          <div>  30 </div>
          <div>2014/12/30 14:20</div>
        </li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
  function autoScroll(obj){
    $(obj).find("ul").animate({
      marginTop : "-39px"
    },1000,function(){
      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
    })
  }
  $(function(){
    var scroll=setInterval('autoScroll(".maquee")',1500);
     $(".maquee").hover(function(){
      console.log("aaa");
      clearInterval(scroll);
     },function(){
      scroll=setInterval('autoScroll(".maquee")',1500);
     });
  });
</script>
</body>
</html>
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
jQuery 구현 탄막 효과 전체 인 스 턴 스
BootstrapTable 쉽게 돌리 기(백 엔 드 SpringMVC+Hibernate 사용)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage