文字横向滚动效果

最新推荐文章于 2024-02-21 10:22:31 发布

「已注销」

最新推荐文章于 2024-02-21 10:22:31 发布

阅读量4.9k

点赞数

分类专栏： CSS jQuery 文章标签： jquery CSS3

本文链接：https://blog.csdn.net/duola8789/article/details/78435665

版权

CSS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

本文介绍了如何利用jQuery的animate方法和CSS3的keyframes规则来创建文字横向滚动效果。虽然现代浏览器已支持@keyframes规则，但旧版浏览器如Firefox、Opera、Safari和Chrome需要使用各自的供应商前缀。@keyframes允许定义CSS样式的变化，通过改变样式实现动画效果。要确保最佳浏览器兼容性，应定义0%和100%选择器。

摘要由CSDN通过智能技术生成

1.利用jQuery的animta方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TEXT-MOVE</title>
  <script SRC="../lib/jquery.min.js"></script>
  <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 {
      display: inline-block;
      white-space: nowrap;
    }
  </style>
</head>
<body>
<div class="container">
  <p class="text">我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字</p>
</div>
<script>
  var $container = $('.container'),
    $text = $('.text');
  var direction = 1, // 1为从左进入，2为从右进入
    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>
</body>
</html>

2. 利用CSS3的keyframe规则

目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画（天然与选择器绑定)。

语法：

@keyframes animationname {keyframes-selector {css-styles;}}

nimationname–必需。定义动画的名称。
keyframes-selector–必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TEXT-MOVE</title>
  <script SRC="../lib/jquery.min.js"></script>
  <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>
</head>
<body>
<div class="container">
  <p class="text">我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字</p>
</div>
<script>
  var $text = $('.text');
  var initMarginLeft = '-' + $text.width() + 'px';
  $text.css({"margin-left": initMarginLeft});
</script>
</body>
</html>