下面是详细的Javascript实现无缝上下滚动特效的攻略：

1. 准备工作

在HTML中先定义一个滚动区域的div，指定其宽度和高度，并将其设置为相对定位。在滚动区域内部创建一个ul列表，用于存放滚动项。需要注意的是，ul列表的高度应该设置成比滚动区域高出至少一倍以上，以便可以无缝滚动。

2. 实现滚动

使用Javascript中的setInterval方法，定时移动滚动区域内部的ul列表。具体步骤为：

定义一个表示当前滚动位置的变量pos，初始值为0。
使用setInterval方法，每隔一定时间执行一次滚动操作，移动ul列表，并更新当前滚动位置的值。
当ul列表滚动到末尾时，需要重新从起点开始滚动。这时，需要同时将当前滚动位置的值重置。

下面是示例代码：

// 获取滚动区域和ul列表
var wrapper = document.querySelector('.wrapper');
var list = document.querySelector('ul');

// 定义滚动位置和滚动速度
var pos = 0;
var speed = 0.5;

// 使用setInterval方法定时移动ul列表
var timer = setInterval(function() {
  // 更新滚动位置的值
  pos += speed;

  // 移动ul列表
  list.style.top = -pos + 'px';

  // 当滚动到末尾时，重新移动到起点
  if (pos >= list.offsetHeight / 2) {
    pos = 0;
  }
}, 10);

3. 添加滚动项

需要先在Javascript中定义一个包含滚动项的数组data。在页面加载时，使用Javascript动态添加滚动项。具体步骤为：

使用document.createElement方法创建一个li元素，将其中的内容和样式设置成需要显示的滚动项。
将li元素添加到ul列表中。

下面是示例代码：

// 定义滚动项数组
var data = [
  { title: '滚动项一', url: 'http://www.example.com/1' },
  { title: '滚动项二', url: 'http://www.example.com/2' },
  { title: '滚动项三', url: 'http://www.example.com/3' }
];

// 获取ul列表，并添加滚动项
var list = document.querySelector('ul');

for (var i = 0; i < data.length; i++) {
  var item = document.createElement('li');
  item.innerHTML = '<a href="' + data[i].url + '">' + data[i].title + '</a>';
  list.appendChild(item);
}

示例1：垂直方向的无缝滚动

下面是一个垂直方向的无缝滚动的示例页面。其中，使用了上述的攻略实现了无缝滚动效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>垂直方向的无缝滚动</title>
  <style>
    .wrapper {
      width: 400px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    ul {
      padding: 0;
      margin: 0;
      position: absolute;
    }

    li {
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <ul></ul>
  </div>

  <script>
    // 定义滚动项数组
    var data = [
      { title: '滚动项一', url: 'http://www.example.com/1' },
      { title: '滚动项二', url: 'http://www.example.com/2' },
      { title: '滚动项三', url: 'http://www.example.com/3' }
    ];

    // 获取滚动区域和ul列表
    var wrapper = document.querySelector('.wrapper');
    var list = document.querySelector('ul');

    // 定义滚动位置和滚动速度
    var pos = 0;
    var speed = 0.5;

    // 使用setInterval方法定时移动ul列表
    var timer = setInterval(function() {
      // 更新滚动位置的值
      pos += speed;

      // 移动ul列表
      list.style.top = -pos + 'px';

      // 当滚动到末尾时，重新移动到起点
      if (pos >= list.offsetHeight / 2) {
        pos = 0;
      }
    }, 10);

    // 添加滚动项
    for (var i = 0; i < data.length; i++) {
      var item = document.createElement('li');
      item.innerHTML = '<a href="' + data[i].url + '">' + data[i].title + '</a>';
      list.appendChild(item);
    }
  </script>
</body>
</html>

示例2：水平方向的无缝滚动

下面是一个水平方向的无缝滚动的示例页面。其中，使用了类似的攻略实现了水平滚动效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>水平方向的无缝滚动</title>
  <style>
    .wrapper {
      width: 400px;
      height: 100px;
      overflow: hidden;
      position: relative;
    }

    ul {
      padding: 0;
      margin: 0;
      position: absolute;
      white-space: nowrap;
    }

    li {
      display: inline-block;
      vertical-align: top;
      width: 80px;
      height: 80px;
      margin-right: 10px;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <ul></ul>
  </div>

  <script>
    // 定义滚动项数组
    var data = [
      { title: '滚动项一', url: 'http://www.example.com/1' },
      { title: '滚动项二', url: 'http://www.example.com/2' },
      { title: '滚动项三', url: 'http://www.example.com/3' },
      { title: '滚动项四', url: 'http://www.example.com/4' },
      { title: '滚动项五', url: 'http://www.example.com/5' },
      { title: '滚动项六', url: 'http://www.example.com/6' }
    ];

    // 获取滚动区域和ul列表
    var wrapper = document.querySelector('.wrapper');
    var list = document.querySelector('ul');

    // 定义滚动位置和滚动速度
    var pos = 0;
    var speed = 1;

    // 使用setInterval方法定时移动ul列表
    var timer = setInterval(function() {
      // 更新滚动位置的值
      pos += speed;

      // 移动ul列表
      list.style.left = -pos + 'px';

      // 当滚动到末尾时，重新移动到起点
      if (pos >= list.offsetWidth / 2) {
        pos = 0;
      }
    }, 10);

    // 添加滚动项
    for (var i = 0; i < data.length; i++) {
      var item = document.createElement('li');
      item.innerHTML = '<a href="' + data[i].url + '">' + data[i].title + '</a>';
      list.appendChild(item);
    }
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现无缝上下滚动特效 - Python技术站

javascript实现无缝上下滚动特效

1. 准备工作

2. 实现滚动

3. 添加滚动项

示例1：垂直方向的无缝滚动

示例2：水平方向的无缝滚动

相关文章