<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>demo6</title>
<style type="text/css">
ul,li{margin:0;padding:0;font-size:12px;color:#999;}
ul li{line-height:20px;height:20px;}
</style>
</head>
<body>
<ul id="list">
<li>“卧槽泥马”：又一网络新词1</li>
<li>“卧槽泥马”：又一网络新词2</li>
<li>“卧槽泥马”：又一网络新词3</li>
<li>“卧槽泥马”：又一网络新词4</li>
<li>“卧槽泥马”：又一网络新词5</li>
<li>“卧槽泥马”：又一网络新词6</li>
<li>“卧槽泥马”：又一网络新词7</li>
<li>“卧槽泥马”：又一网络新词8</li>
<li>“卧槽泥马”：又一网络新词9</li>
<li>“卧槽泥马”：又一网络新词10</li>
<li>“卧槽泥马”：又一网络新词11</li>
<li>“卧槽泥马”：又一网络新词12</li>
<li>“卧槽泥马”：又一网络新词13</li>
<li>“卧槽泥马”：又一网络新词14</li>
</ul>
<script type="text/javascript">
function scroll(element, delay, speed, lineHeight) {
var numpergroup = 5;
var slideBox = (typeof element == 'string')?document.getElementById(element):element;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
var tid = null, pause = false;
var liLength = slideBox.getElementsByTagName('li').length;
var lack = numpergroup-liLength%numpergroup;
for(i=0;i<lack;i++){
slideBox.appendChild(document.createElement("li"));
}
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 1;
if ( slideBox.scrollTop % lineHeight == 0 ) {
clearInterval(tid);
for(i=0;i<numpergroup;i++){
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
}
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, delay);
}
scroll('list', 1000, 50, 20);//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。
</script>
</body>
</html>
分享到：
相关推荐
通过这种方式，你可以实现一个基于原生JavaScript和Vue.js的左右无缝滚动组件，同时利用CSS实现美观的视觉效果。这不仅能够提升用户体验，还可以作为学习Vue组件化开发的一个实用案例。在实际项目中，你可能还需要...
无缝循环滚动插件是一种网页动态效果技术，常用于展示新闻、产品列表或轮播图等，为用户提供连续不间断的浏览体验。基于jQuery实现的此类插件利用了jQuery库的强大功能和简洁API，使得开发者能够轻松地创建出平滑、...
在本文中，我们将深入探讨如何在 Vue 中自定义一个基于 `marquee` 的无缝滚动组件。`marquee` 是一种创建滚动文本效果的方式，常用于网站中展示不断滚动的信息，如新闻标题或广告。然而，HTML5 中的原生 `marquee` ...
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
图片无缝滚动技术是一种...通过以上知识点的学习和实践，可以构建一个功能完善的图片无缝滚动组件。在实际项目中，还需要关注性能优化，比如减少DOM操作，合理使用缓存，以及控制动画的帧率，以提供流畅的用户体验。
Vue 无缝滚动组件 Vue-Seamless-Scroll 实例 Vue-Seamless-Scroll 是一个基于 Vue.js 的无缝滚动组件，提供了简洁易用的 API，帮助开发者快速实现无缝滚动效果。本文将详细介绍 Vue-Seamless-Scroll 的用法和配置。...
网页图片无缝滚动是一种常见的网页设计...通过掌握以上技术点，你可以实现一个功能完备且用户体验良好的网页图片无缝滚动组件。在实际项目中，还可以根据需求添加更多定制功能，如图片加载进度指示、自定义过渡效果等。
然后，使用jQuery来实现无缝滚动效果。这里可以使用`setInterval`函数来定时改变列表的`top`值，模拟向上滚动的效果。例如： ```javascript $(function() { var list = $('.scroll-list'); var speed = 5; // ...
同时，随着前端框架如React、Vue和Angular的流行，无缝滚动也可以通过这些框架的插件或组件来实现，提供更丰富的功能和更好的性能。 总结来说，图片无缝滚动是通过JavaScript实现的一种网页动态效果，它通过巧妙的...
JavaScript特效无缝滚动是一种常见的网页动态效果，常用于广告展示、新闻滚动等场景。"marquee"是HTML的一个非标准标签，用于创建一个自动移动（滚动）的文本或图像区域，而JavaScript则提供了更灵活和强大的控制...
在Android开发中，创建一个无缝连接可循环滚动的布局是一个常见的需求，比如在轮播图、商品列表等场景。这个自定义的`ViewGroup`，名为`ForeverLayout`，就是为了满足这种需求而设计的。它允许用户在内容达到边界时...
例如，jQuery有众多插件如bxSlider或Slick可以快速实现无缝滚动效果，而Vue.js则可以通过自定义指令或者组件来封装这个功能。 在提供的压缩包文件"texiao6794_1560681094"中，可能包含了实现这种图片无缝滚动效果的...
在这个场景中，我们讨论的是一个原生JavaScript实现的"scrolltext"插件，它提供了文字向上无缝滚动的功能，并且还配备了按钮控制，使得用户可以自由地操作滚动速度和方向。这个插件对于动态展示大量文本信息，如公告...
在IT领域，尤其是在Web开发中，轻量级列表无限滚动组件是一种常见的用户界面设计技术，它使得用户在浏览长列表时无需手动翻页，而是通过滚动页面，内容会自动加载更多，提供无缝的浏览体验。这种组件对于提高用户...
本项目是基于Vue.js框架实现的移动端轮播图，具备了触摸滑动滚动、自动轮播、无缝滚动以及循环无回滚等功能，非常适合前端初学者进行学习和实践。 首先，我们要理解Vue.js的基础概念。Vue.js是一个轻量级的前端框架...
在 Vue 应用中，有时候我们需要实现元素的无缝滚动效果，比如新闻滚动条、广告轮播等，这就是“vue滚动”这一标签所涵盖的内容。而“liMarquee.zip”则提供了一个针对Vue的无缝滚动插件，帮助开发者轻松实现这个功能...
在IT行业中，网页设计与开发是一项关键技能，而"Tab+无缝滚动组合"是一个常见的交互设计元素，广泛应用于网站和应用程序中，以提供用户友好的界面。这种设计结合了tab切换功能和图片无缝滚动效果，使得多组内容可以...
React无限滚动 使用React组件无限加载内容。 该fork维护了一个简单，轻量级的无限滚动包，该包同时支持window和scrollable元素。安装npm install react-infinite-scroller --saveyarn add react-infinite-scroller...