<!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组件化开发的一个实用案例。在实际项目中，你可能还需要...
Vue-无缝滚动 适用于 Vue.js 的简单无缝滚动特征初始配置支持兼容多种平台多技术栈版本支持文档要查看实时示例和文档，请访问vue-seamless-scroll-doc。关怀如果希望 js 无缝滚动（无依赖）可以切换到这里。...
无缝循环滚动插件是一种网页动态效果技术，常用于展示新闻、产品列表或轮播图等，为用户提供连续不间断的浏览体验。基于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切换功能和图片无缝滚动效果，使得多组内容可以...