文字横向滚动效果

来源：互联网发布：仓储物流软件系统编辑：程序博客网时间：2024/05/21 11:20

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>

阅读全文

0 0