js案例之跑马灯代码,js跑马灯的实现

发布时间：2023-12-08

js案例之跑马灯代码,js跑马灯的实现

更新：2022-11-19 19:24

本文目录一览：

  1. 一行文字跑马灯怎样用Jquery或js做？
  2. jquery 跑马灯 怎么 实现 循环
  3. 求Jquery或js一行文字跑马灯代码
  4. js怎么实现标题跑马灯功能？
  5. 急需一个连续不间断的跑马灯的代码
  6. JS跑马灯代码如何实现

一行文字跑马灯怎样用Jquery或js做？

使用方法：

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

<script src="jquery-1.11.2.min.js"></script>
<script src="marquee.js"></script>

HTML结构：

跑马灯中的文字使用无序列表来制作，外面使用一个div作为包裹容器。

<div class="container">
  <div class="marquee-sibling">Breaking News</div>
  <div class="marquee">
    <ul class="marquee-content-items">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>

CSS样式：

下面是该跑马灯特效的一些基本样式。

.container {
  width: 100%;
  background: #4FC2E5;
  float: left;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 45px;
  position: relative;
  cursor: pointer;
}
.marquee-sibling {
  padding: 0;
  background: #3BB0D6;
  width: 20%;
  height: 45px;
  line-height: 42px;
  font-size: 12px;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  float: left;
  left: 0;
  z-index: 2000;
}
.marquee, *[class^="marquee"] {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
}
.marquee {
  margin-left: 25%;
}
.marquee-content-items {
  display: inline-block;
  padding: 5px;
  margin: 0;
  height: 45px;
  position: relative;
}
.marquee-content-items li {
  display: inline-block;
  line-height: 35px;
  color: #fff;
}
.marquee-content-items li:after {
  content: "|";
  margin: 0 1em;
}

初始化插件：

$(function (){
  createMarquee();
});

配置参数：

下面是该跑马灯特效的可用配置参数。

$(function (){
  createMarquee({
    // controls the speed at which the marquee moves
    duration: 30000,
    // right margin between consecutive marquees
    padding: 20,
    // class of the actual div or span that will be used to create the marquee -
    // multiple marquee items may be created using this item's content.
    // This item will be removed from the dom
    marquee_class: '.example-marquee',
    // the container div in which the marquee content will animate.
    container_class: '.example-container',
    // a sibling item to the marqueed item that affects -
    // the end point position and available space inside the container.
    sibling_class: '.example-sibling',
    // Boolean to indicate whether pause on hover should is required.
    hover: false
  });
});

jquery 跑马灯 怎么 实现 循环

  1. 打开 Dreamweaver
  2. 新建 HTML 文档；
  3. 修改标题为"跑马灯"
  4. 保存为 index.html 文件。

跑马灯部分的静态 HTML 代码：

<div class="con marquee">
  <ul>
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
    <li><img src="img/5.jpg" /></li>
    <li><img src="img/6.jpg" /></li>
    <li><img src="img/7.jpg" /></li>
  </ul>
</div>

CSS 样式代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.con {
  width: 1105px;
  height: 225px;
  overflow: hidden;
  border: 2px solid #666;
  margin: 10px auto 0 auto;
  padding: 5px 0 0 5px;
}
.con ul li {
  float: left;
  margin: 0 5px 10px 0;
}
.con ul li img {
  display: block;
  width: 209px;
  height: 209px;
  padding: 2px;
  border: 1px solid #ccc;
}

引入 JQuery 库 和 Marquee 插件：

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="marquee2.js"></script>

修改 div 的 class：

<div class="con marquee">

保存文件，在浏览器中打开，就可以看到图片开始滚动了。 图片默认的滚动方向是“向上滚动”，如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：

  • up 上
  • down 下
  • left 左
  • right 右 完整的例子放在百度网盘中，需要的请发邮件到 xdhy_dn@foxmail.com，主题写 “百度经验”。自动回复下载地址。

求Jquery或js一行文字跑马灯代码

这个完全是我本人自己真实项目当中的代码。 其实不用js 用css3就能完成。

CSS代码：

标签: {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #3CAF5A), color-stop(0.3, #3CAF5A), color-stop(0.5, white), color-stop(0.7, #3CAF5A), color-stop(1, #3CAF5A));
  background-clip: text; /* 文字背景区域 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-animation: slidetounlock 2s linear infinite; /* 动画执行的参数 第一是 动画执行的名字 第二是所需时间 第三个是执行动画的快慢infinite是均速 第四个参数是循环 */
  animation: slidetounlock 2s linear infinite;
}
/* 为了兼容建议把写全 百分比是指动画执行到多少以后执行里面的动画 */
@keyframes slidetounlock {
  0% {
    background-position: -2rem 0;
  }
  80% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 2rem 0;
  }
}
@-webkit-keyframes slidetounlock {
  0% {
    background-position: -2rem 0;
  }
  80% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 2rem 0;
  }
}
@-moz-keyframes slidetounlock {
  0% {
    background-position: -1.1rem 0;
  }
  80% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 1.1rem 0;
  }
}
@-ms-keyframes slidetounlock {
  0% {
    background-position: -1.1rem 0;
  }
  80% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 1.1rem 0;
  }
}
@-o-keyframes slidetounlock {
  0% {
    background-position: -1.1rem 0;
  }
  80% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 1.1rem 0;
  }
}

之后你只需要设置文字所在容器的宽度就行，用px可以代替rem；可根据自己的需求来修改。 最后效果就是白色会一直从左到右，有点像早期苹果滑动解锁的那种动画，这个可以根据实际需求来修改。

js怎么实现标题跑马灯功能？

这边百度了一个代码，供参考：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>js跑马灯效果</title>
</head>
<body>
  <div id="txt" style="color: white; background-color: red; text-align: center; font-size: 50px;">欢迎您的来访！</div>
  <script type="text/javascript">
    setInterval(function () { // 通过定时器重复动作
      var oTxt = document.getElementById('txt'); // 获取标签
      var txt = oTxt.innerText; // 获取标签文本内容
      var first_i = txt[0]; // 字符串索引取值
      var last_i = txt.slice(1, txt.length); // 字符串切片
      var new_txt = last_i + first_i; // 字符串拼接
      oTxt.innerText = new_txt; // 拼接后的字符串放到标签文本内容
    }, 300);
  </script>
</body>
</html>

急需一个连续不间断的跑马灯的代码

我这有个精简版的连续不间断的跑马灯的代码js的：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
  <div id="roll1" style="OVERFLOW:hidden; WIDTH:450px;">
    <table>
      <tr>
        <td id="rollleft1">
          <table>
            <tr>
              <td>1111111111111111</td>
              <td>2222222222222222</td>
              <td>3333333333333333</td>
              <td>4444444444444444</td>
            </tr>
          </table>
        </td>
        <td id="rollright1"></td>
      </tr>
    </table>
  </div>
  <table>
    <tr>
      <td>
        <script language="JavaScript" type="text/JavaScript">
          var speed1 = 22;
          rollright1.innerHTML = rollleft1.innerHTML;
          function Marquee1() {
            if (rollright1.offsetWidth - roll1.scrollLeft <= 0) {
              roll1.scrollLeft -= rollleft1.offsetWidth;
            } else {
              roll1.scrollLeft++;
            }
          }
          var MyMar1 = setInterval(Marquee1, speed1);
          roll1.onmouseover = function () {
            clearInterval(MyMar1);
          };
          roll1.onmouseout = function () {
            MyMar1 = setInterval(Marquee1, speed1);
          };
        </script>
      </td>
    </tr>
  </table>
</body>
</html>

JS跑马灯代码如何实现

jquery的，参考一下吧，希望对你有帮助，如果有不明白的，可以追问。

推荐文章