无缝滚动实现：CSS+JS模拟marquee效果

本文档主要介绍了如何实现图片的无缝滚动效果，特别是针对`<marquee>`元素存在的不循环滚动问题的替代方案。这种方法采用JavaScript配合CSS来创建一个无缝滚动的效果，核心思路是利用两个相同的图片容器`demo1`和`demo2`，通过控制它们的`scrollTop`或`scrollLeft`属性来模拟滚动。当滚动到两者的交界处时，由于它们内容相同，不会出现明显的跳动，从而达到无缝滚动的效果。 首先，作者介绍了一些关键的DOM元素属性，如`innerHTML`用于设置或获取HTML内容，`scrollHeight`和`scrollWidth`用于获取滚动区域的高度和宽度，而`scrollTop`和`scrollLeft`则是控制滚动位置的。`offsetHeight`、`offsetLeft`、`offsetTop`和`offsetWidth`则提供了元素相对于视口的位置信息。 接下来，CSS部分定义了一个名为`demo`的容器，设置了背景色、隐藏溢出内容、边框样式、高度以及文本对齐方式，并确保它浮动在页面左侧。`demoimg`样式定义了图片的边框样式和块级展示。 然后，展示了实际的代码示例，其中包含一个`div`（`demo`）内嵌两个子`div`（`demo1`和`demo2`），`demo1`内放置图片链接。通过JavaScript，可以通过定时器或事件驱动的方式，定期更新`demo1`的`scrollTop`或`scrollLeft`，使其滚动，当接近`demo2`时，通过检查边界条件，让`demo1`回到初始位置，保持无缝滚动效果。 这种方法的优势在于简洁易懂且兼容性较好，可以适用于大多数现代浏览器。然而，需要注意的是，由于JavaScript控制，如果在性能敏感的场景下，可能需要优化滚动逻辑，以避免不必要的重绘和回流。同时，这种无缝滚动可能会导致一些视觉上的微小延迟，但总体上能提供一种实用的滚动体验。