css文字從右邊到左的滾動效果怎麼實現？（程式碼範例）

最後更新：2018-08-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章主要給大家介紹網頁html文字滾動代碼效果如何寫？當我們在瀏覽新聞播放的頁面時，總會看到底部有一段即時新聞不停的滾動出現，這樣的效果通常可以由js或者css來完成操作。下面給大傢具體介紹兩種方法，

一、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 = $('.container'),    $text = $('.text');  var direction = 1,     speed = 3000;   var textMove = function (obj, container, direction, speed) {    var initMarginLeft = '-' + obj.width() + 'px';    obj.css({"margin-left": initMarginLeft});      var move = function () {      var allDistance = obj.width() + container.width(),        remainedDistance = container.width() - parseInt(obj.css('margin-left')),        currentSpeed = (speed * remainedDistance ) / allDistance;      // 移動效果      obj.animate({"margin-left": container.width() + 'px'}, currentSpeed, 'linear', function () {        obj.stop(true, true);        obj.css({"margin-left": initMarginLeft});        move();      });    };    move();       container.on("mouseenter", function () {obj.stop(true)})      .on('mouseleave', function () {move()})  };  textMove($text, $container, direction, speed);</script>

以上文字滾動js代碼中相關知識點注釋：

var direction中表示 1為從左進入，2為從右進入；

speed 表示數值越小速度越快

var textMove，定義文字初始位置

obj.css(）定義動畫

animate() 方法執行 CSS 屬性集的自訂動畫。

該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。只有數字值可建立動畫（比如 "margin:30px"）。字串值無法建立動畫（比如 "background-color:red"）。

二、css文字在div裡滾動程式碼範例：

  <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 樣式。以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間。為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選取器。

animationname 必需。定義動畫的名稱。

keyframes-selector 必需。動畫時間長度的百分比。

合法的值：0-100% from（與 0% 相同）to（與 100% 相同）

css-styles 必需。一個或多個合法的 CSS 樣式屬性。

以上就是關於css滾動效果文字橫向滾動和js文字滾動的方法介紹，希望對有需要的朋友有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More