CSS 텍스트의 스크롤 효과를 오른쪽에서 왼쪽으로 얻는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

CSS 텍스트의 스크롤 효과를 오른쪽에서 왼쪽으로 얻는 방법은 무엇입니까? (코드 예)

藏色散人

풀어 주다： 2018-08-13 14:33:10

원래의

15619명이 탐색했습니다.

이 글에서는 주로 웹 페이지에 HTML 텍스트 스크롤 코드 효과를 작성하는 방법을 소개합니다. 뉴스 재생 페이지를 탐색할 때 항상 하단에 실시간 뉴스 스크롤이 표시됩니다. 이 효과는 일반적으로 js 또는 css를 통해 달성할 수 있습니다. 아래에서 두 가지 방법을 자세히 소개하겠습니다.

1. js 텍스트 스크롤 코드의 구체적인 예:

HTML 코드:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
</head>
<body>
<div class="container">
    <p class="text">文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css</p>
</div>
</body>
</html>

로그인 후 복사

<script>
  var $container = $(&#39;.container&#39;),
    $text = $(&#39;.text&#39;);  var direction = 1, 
    speed = 3000; 
  var textMove = function (obj, container, direction, speed) {
    var initMarginLeft = &#39;-&#39; + obj.width() + &#39;px&#39;;
    obj.css({"margin-left": initMarginLeft});  
    var move = function () {
      var allDistance = obj.width() + container.width(),
        remainedDistance = container.width() - parseInt(obj.css(&#39;margin-left&#39;)),
        currentSpeed = (speed * remainedDistance ) / allDistance;      // 移动效果
      obj.animate({"margin-left": container.width() + &#39;px&#39;}, currentSpeed, &#39;linear&#39;, function () {
        obj.stop(true, true);
        obj.css({"margin-left": initMarginLeft});
        move();
      });
    };
    move();   
    container.on("mouseenter", function () {obj.stop(true)})
      .on(&#39;mouseleave&#39;, function () {move()})
  };
  textMove($text, $container, direction, speed);</script>

로그인 후 복사

위 텍스트 스크롤 js 코드에서 관련 지식 포인트에 대한 참고 사항:

var 방향은 1을 의미합니다. 2는 오른쪽에서 입력을 의미합니다.

speed는 값이 작을수록 속도가 빨라짐을 의미합니다.

var textMove는 텍스트의 초기 위치를 정의합니다.

obj.css() 애니메이션 정의

CSS 텍스트의 스크롤 효과를 오른쪽에서 왼쪽으로 얻는 방법은 무엇입니까? (코드 예) animate() 메소드 실행 CSS 속성 세트에 대한 사용자 정의 애니메이션.

이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다. 숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색상:빨간색").

2. div의 CSS 텍스트 스크롤 코드 예:

  <style type="text/css" rel="stylesheet">
    * {  margin: 0;  padding: 0;}
    .container { margin: 200px auto;  width: 500px;   height: 50px; line-height: 50px;border: 1px solid red;  overflow: hidden;    }
    .text {  position: relative;      display: inline-block;      white-space: nowrap;      /*animation:scroll 5s 0s linear infinite;*/
      animation-name: scroll;      animation-duration: 5s;      animation-delay: 0ms;      animation-timing-function: linear;      animation-iteration-count: infinite;      -webkit-animation-name: scroll;      -webkit-animation-delay: 0ms;      -webkit-animation-duration: 5s;      -webkit-animation-timing-function: linear;      -webkit-animation-iteration-count: infinite;      -moz-animation-name: scroll;      -moz-animation-delay: 0ms;      -moz-animation-duration: 5s;      -moz-animation-timing-function: linear;      -moz-animation-iteration-count: infinite;    }
    @-webkit-keyframes scroll {
      100% {  margin-left: 100%; }
    }    @-moz-keyframes scroll {
      100%  {  margin-left: 100%;}
    }    @-ms-keyframes scroll {
      100%  { margin-left: 100%;  }
    }    .text:hover { -webkit-animation-play-state: paused;  }
  </style>

로그인 후 복사

관련 지식 포인트에 대한 참고 사항:

@keyframes 규칙을 통해 애니메이션을 만들 수 있습니다. 원칙은 한 CSS 스타일 세트를 다른 CSS 스타일 세트로 점진적으로 변경하는 것입니다. 애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다. 변경 사항이 백분율로 발생하는 시점을 지정하거나 0% 및 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다. 0%는 애니메이션의 시작 시간이고, 100%는 애니메이션의 종료 시간입니다. 최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택기를 정의해야 합니다.

animationname 필수입니다. 애니메이션의 이름을 정의합니다.

keyframes-selector 필수입니다. 애니메이션 지속 시간의 백분율입니다.

적용 값: 0-100%(0%와 동일)부터 (100%와 동일)

css-styles 필수입니다. 하나 이상의 합법적인 CSS 스타일 속성입니다.

위 내용은 CSS 스크롤 효과, 텍스트 가로 스크롤 및 JS 텍스트 스크롤 방법에 대한 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

【관련 기사 추천】

HTML에서 스크롤 텍스트를 만드는 예제 코드

JS의 10줄 텍스트를 원활하게 스크롤하는 간단한 방법

선택 윤곽을 사용하여 텍스트를 왼쪽 및 오른쪽으로 스크롤하는 방법 HTML

JS 구현에서 텍스트 간헐적 스크롤

위 내용은 CSS 텍스트의 스크롤 효과를 오른쪽에서 왼쪽으로 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!