GVKun编程网logo

JS文字间歇循环滚动效果怎么实现（js文字间歇循环滚动效果怎么实现的）

15

如果您对JS文字间歇循环滚动效果怎么实现感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于JS文字间歇循环滚动效果怎么实现的详细内容，我们还将为您解答js文字间歇循环滚动效果怎

如果您对JS文字间歇循环滚动效果怎么实现感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于JS文字间歇循环滚动效果怎么实现的详细内容，我们还将为您解答js文字间歇循环滚动效果怎么实现的的相关问题，并且为您提供关于css怎么实现平滑滚动效果、css怎么实现文字循环滚动效果、css怎么实现滚动效果、css文字从右边到左的滚动效果怎么实现？（代码示例）的有价值信息。

本文目录一览：

JS文字间歇循环滚动效果怎么实现（js文字间歇循环滚动效果怎么实现的）

JS文字间歇循环滚动效果怎么实现（js文字间歇循环滚动效果怎么实现的）

这次给大家带来JS文字间歇循环滚动效果怎么实现，JS文字间歇循环滚动效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<Meta charset=utf-8/>
<title>www.jb51.net - 间歇循环滚动</title>
<style>
#Box{
  height:240px;
  width:300px;
  margin:0 auto;
  border:1px solid #0066FF;
  overflow:hidden;
  padding-bottom:20px;
}
#Box li{
  color:#333;
  height:24px;
}
#Box ul{
  margin:0;
  padding:0;
}
</style>
</head>
<body>
<p id=Box>
  <ul id=con1>
    <li>PHP1</li>
    <li>PHP2</li>
    <li>PHP3</li>
    <li>PHP4</li>
    <li>PHP5</li>
    <li>PHP6</li>
    <li>PHP7</li>
    <li>PHP8</li>
    <li>PHP9</li>
  </ul>
</p>
<script>
var area=document.getElementById(Box);
area.innerHTML+=area.innerHTML;
var liHeight=24;
area.scrollTop=0;
var delay=2000;
var speed=50;
var time;
function starMove(){
  area.scrollTop++;
  time=setInterval(scrollUp(),speed);
}
function scrollUp(){
  if(area.scrollTop%liHeight==0){
  clearInterval(time);
  setTimeout(starMove(),delay);
  }else{
  area.scrollTop++;
  if(area.scrollTop>=area.offsetHeight/2){
  area.scrollTop=0;
  }
  }
}
setTimeout(starMove(),delay);
</script>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注小编网其它相关文章！

推荐阅读：

JS运动缓冲效果的封装函数如何使用

JavaScript的异步加载详解

css怎么实现平滑滚动效果

css怎么实现平滑滚动效果

这篇文章主要讲解了“css怎么实现平滑滚动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现平滑滚动效果”吧！

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <title>锚点平滑跳转</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    nav {
      width: 50%;
      height: 50px;
      text-align: center;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      background: green;
    }

    nav a {
      display: inline-block;
      line-height: 50px;
      color: #FFF;
      text-decoration: none;
      padding: 0 30px;
    }


    .Box {
      width: 100%;
      text-align: center;
      font-size: 30px;
      color: #FFF;
    }

    #Box1 {
      background: #d00;
    }

    #Box2 {
      background: #42a4ff;
    }

    #Box3 {
      background: #008080;
    }

    #to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      background: #ccc;
      color: #666;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <nav>
    <a href="#Box1">Box1</a>
    <a href="#Box2">Box2</a>
    <a href="#Box3">Box3</a>
  </nav>

  <div id="Box1" https://www.jb51.cc/tag/Box/" target="_blank">Box">Box1</div>
  <div id="Box2" https://www.jb51.cc/tag/Box/" target="_blank">Box">Box2</div>
  <div id="Box3" https://www.jb51.cc/tag/Box/" target="_blank">Box">Box3</div>

  <div id="to-top">回到顶部</div>

  <script>
    onload = function () {
      const _Height = document.documentElement.clientHeight;
      const Box = document.getElementsByClassName('Box');

      for (var i = 0; i < Box.length; i++) {
        Box[i].style.height = _Height + 'px'
        Box[i].style.lineHeight = _Height + 'px'
      }

      document.querySelector('#to-top').onclick = function (el) {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    }
  </script>
</body>

</html>

主要

html {
 scroll-behavior: smooth;
}

这样，在回到顶部的时候，会有动画不会立即过去，或有渐变动画
锚点，切换屏幕的时候也会有动画

.querySelector('#to-top').onclick = function (el) {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }

感谢各位的阅读，以上就是“css怎么实现平滑滚动效果”的内容了，经过本文的学习后，相信大家对css怎么实现平滑滚动效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是小编，小编将为大家推送更多相关知识点的文章，欢迎关注！

css怎么实现文字循环滚动效果

css怎么实现文字循环滚动效果

css实现文字循环滚动的方法：1、在文字元素上使用animation属性绑定一个循环动画；2、利用“@keyframes”规则和“transform: translatex(值%)”语句设置动画每一帧中文字的平移位置即可。

css怎么实现文字循环滚动效果

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css实现文字循环滚动效果

在css中，可以利用animationh和keyframest通过给文字绑定一个循环滚动动画来实现文字循环滚动效果。

实现代码：

立即学习“前端免费学习笔记（深入）”；

html：

<div>
    <p>
        文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
    </p>
</div>
登录后复制

css：

.box {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ff6700;
    overflow: hidden;
}

.animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 5s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
登录后复制

效果图：

2.gif

说明：

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

translateX(x)：定义平移转换，只是用 X 轴的值。    

（学习视频分享：css视频教程）

以上就是css怎么实现文字循环滚动效果的详细内容，更多请关注php中文网其它相关文章！

css怎么实现滚动效果

css怎么实现滚动效果

css实现滚动效果

滚动效果通常用于网站页面设计中的各种交互、动画和导航。大多数常规的网站滚动效果可以通过HTML+CSS实现，此文将简单介绍其中几种实现方式。

  1. 利用overflow和position属性

HTML标签包裹内容（如div）的overflow属性为scroll，再利用position属性确定内容区域的位置，可以实现滚动效果。代码如下：

<div>
   <div> <!-- 内容区域 -->
     <!-- 内容部分 -->
   </div>
</div>
登录后复制
  1. 利用transform属性

使用transform属性的translateY或translateX可以实现滚动效果，将内容通过位移的方式进行滚动。代码如下：

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   transform: translateY(0);
   transition: transform 0.2s ease-out;
}
登录后复制

JS代码部分如下：

立即学习“前端免费学习笔记（深入）”；

let content = document.querySelector(''.content'');
let offsetY = 0; //内容向上偏移的距离
setInterval(() =&gt; {
   content.style.transform = `translateY(-${offsetY}px)`;
   offsetY += 1;
}, 50);
登录后复制
  1. 利用CSS动画

CSS动画可以把滚动效果做成简单而平滑的交互效果。代码如下：

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   animation: scroll 5s linear infinite;
}
 @keyframes scroll {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-400px);
   }
}
登录后复制
  1. 利用滚轮事件监听

通过监听滚轮事件并修改元素的scrollTop或scrollLeft值，可以实现手动滚动效果。代码如下：

<div>
  <div> <!-- 内容区域 -->
    <!-- 内容部分 -->
  </div>
</div>
登录后复制

JS代码部分如下：

立即学习“前端免费学习笔记（深入）”；

let content = document.querySelector(''.content'');
let step = 100; //每次滚动的距离
document.querySelector(''.container'').addEventListener(''wheel'', function(event){
   event.preventDefault();
   content.scrollTop += event.deltaY &gt; 0 ? step : -step;
});
登录后复制

总结

以上就是几种常见的css实现滚动效果的方式，使用时根据具体需求选择最合适的方式。利用CSS的实现方式不仅能简化代码，而且也能让网页更加流畅、动感，同时也方便进行用户体验、组件管理和调试。

以上就是css怎么实现滚动效果的详细内容，更多请关注php中文网其它相关文章！

css文字从右边到左的滚动效果怎么实现？（代码示例）

css文字从右边到左的滚动效果怎么实现？（代码示例）

本篇文章主要给大家介绍网页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>
    <p>文字从右到左滚动 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 direction中表示 1为从左进入，2为从右进入；

立即学习“前端免费学习笔记（深入）”；

speed 表示数值越小速度越快

var textMove，定义文字初始位置

obj.css(） 定义动画

de947a0151aff9ef812f417615de182.pnganimate() 方法执行 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文字滚动的方法介绍，希望对有需要的朋友有所帮助。

【相关文章推荐】

HTML中制作滚动文字的实例代码

10行JS实现文字无缝滚动简单方法

html怎样借助marquee实现文字左右滚动

JS实现文字间歇循环滚动

以上就是css文字从右边到左的滚动效果怎么实现？（代码示例）的详细内容，更多请关注php中文网其它相关文章！

今天的关于JS文字间歇循环滚动效果怎么实现和js文字间歇循环滚动效果怎么实现的的分享已经结束，谢谢您的关注，如果想了解更多关于css怎么实现平滑滚动效果、css怎么实现文字循环滚动效果、css怎么实现滚动效果、css文字从右边到左的滚动效果怎么实现？（代码示例）的相关知识，请在本站进行查询。

本文标签：

上一篇JS添加元素新节点（js添加元素新节点怎么做）

下一篇JS循环Nodelist Dom列表的4种方式（js中循环list）

相关文章