js 无缝滚动，鼠标放上去暂停代码

### JS 无缝滚动，鼠标放上去暂停代码 在前端开发中，实现文本或图片的无缝滚动效果是非常常见的需求之一，特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验，还能增加页面的吸引力。本文将详细解析一个具体的JS无缝滚动示例，并解释其工作原理，帮助开发者更好地理解和应用这一技术。 #### 核心知识点： 1. **DOM 操作**：利用JavaScript操作HTML元素，包括获取元素、修改样式和内容。 2. **事件监听**：添加鼠标移入移出事件监听器，实现滚动暂停与恢复的功能。 3. **定时器**：通过`setInterval`和`clearInterval`控制元素的滚动行为。 ### 示例代码解析 #### HTML 结构 ```html <div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;"> <div id="demo1"> 暂时的内容DIV+CSS布局,web2.0,哦,水图,哦图片 </div> <div id="demo2"></div> </div> ``` - **容器`#demo`**：作为外部容器，设置为固定高度（200px）和宽度（600px），并隐藏溢出内容，以实现滚动效果。 - **内容区域`#demo1`**：包含实际要滚动的内容。 - **副本区域`#demo2`**：复制`#demo1`的内容，用于滚动计算。 #### JavaScript 实现 ```javascript var demo = document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); var speed = 10; // 速度值，数值越小速度越快 var nnn = 200 / demo1.offsetHeight; // 复制内容以确保滚动平滑 for (let i = 0; i < nnn; i++) { demo1.innerHTML += "<br/>" + demo1.innerHTML; } demo2.innerHTML = demo1.innerHTML; // 使demo2与demo1内容相同 function Marquee() { if (demo2.offsetTop - demo.scrollTop <= 0) { // 当demo1滚动到demo2位置时 demo.scrollTop -= demo1.offsetHeight; // 重置滚动位置 } else { demo.scrollTop++; // 否则继续滚动 } } var MyMar = setInterval(Marquee, speed); // 设置定时器 // 添加鼠标事件监听器 demo.onmouseover = function () { clearInterval(MyMar); // 鼠标移入时停止滚动 }; demo.onmouseout = function () { MyMar = setInterval(Marquee, speed); // 鼠标移出时恢复滚动 }; ``` #### 关键步骤解析 1. **获取元素**：首先通过`document.getElementById`获取所需的HTML元素。 2. **计算复制次数**：根据容器的高度和内容的高度计算需要复制的内容次数，以确保内容可以平滑滚动。 3. **内容复制**：通过循环将内容复制到`#demo1`内，然后将复制的内容赋值给`#demo2`。 4. **滚动逻辑**： - 使用`setInterval`创建定时器，每隔指定时间调用`Marquee`函数进行滚动。 - `Marquee`函数判断当前滚动位置是否到达`#demo2`的位置，如果是，则重置滚动位置；否则继续滚动。 5. **事件绑定**：添加鼠标移入(`onmouseover`)和移出(`onmouseout`)事件监听器，实现在鼠标悬停时暂停滚动，在鼠标离开时恢复滚动。 ### 总结 通过上述示例代码，我们不仅实现了无缝滚动的效果，还增加了用户交互性，即当鼠标悬停在滚动区域时自动暂停滚动。这种技术在网页设计中非常实用，可以广泛应用于各种场景。对于开发者来说，理解这段代码的工作原理可以帮助他们在实际项目中灵活应用并进行扩展。