实现无限滚动文字列表的技巧资源-CSDN下载

共2个文件

htm：1个

js：1个

5星 · 超过95%的资源需积分: 50 115 浏览量 2014-12-09 18:28:23 上传评论收藏 33KB ZIP 举报

【文字列表无缝向上滚动】是一种常见的网页动态效果，它能够为用户提供流畅的视觉体验，尤其在展示大量文本信息时，如新闻更新、公告或者产品列表等。这种效果通过编程技术实现，使得文字列表在到达顶部时不是突然消失，而是无缝地从底部重新出现，形成一种循环滚动的效果，增加网站的互动性和吸引力。实现这种效果的关键在于JavaScript和CSS的配合。在给定的文件中，`jquery-1.9.1.min.js`是一个轻量级的JavaScript库，jQuery，它极大地简化了DOM操作、事件处理和动画效果。在这个例子中，jQuery被用来实现文字列表的滚动功能。我们需要将这个库引入到HTML文件（如101.htm）中，通过`<script>`标签链接到jQuery库，确保页面加载后可以调用其函数。接下来，我们需要选择要滚动的文字列表元素，这通常是一个`<ul>`或`<ol>`列表，然后为其添加CSS样式以设定总体高度。这个高度应该是足够显示一行或多行文字的高度，使得在滚动时视觉上没有明显的断层。例如： ```css .scroll-list { height: 300px; /* 设定总体高度 */ overflow: hidden; /* 隐藏超出部分 */ position: relative; /* 用于定位内部元素 */ } ``` 然后，使用jQuery来实现无缝滚动效果。这里可以使用`setInterval`函数来定时改变列表的`top`值，模拟向上滚动的效果。例如： ```javascript $(function() { var list = $('.scroll-list'); var speed = 5; // 每次滚动的速度（像素/秒） setInterval(function() { list.css('top', '-=' + speed); // 当列表顶部超出容器时，将其重置回底部 if (list.position().top <= -list.height()) { list.css('top', 0); } }, 1000 / 60); // 每60毫秒执行一次，即1秒60帧，接近人眼能感知的流畅度 }); ``` 为了使滚动更加平滑，可以利用CSS3的`transition`属性来添加过渡效果，这样在改变`top`值时，列表会有一个平滑的动画过程。此外，还可以通过添加一些自定义的控制按钮，如“暂停”、“恢复”等，来增强用户体验。同时，考虑不同屏幕尺寸和设备类型，可能需要对滚动速度和总体高度进行适配，以保证在各种环境下都能达到良好的视觉效果。 “文字列表无缝向上滚动”是一种结合了JavaScript和CSS的动态网页设计技巧，它可以提升网页的互动性和视觉吸引力。通过理解并应用这些技术，开发者可以创建出更加生动、吸引人的网页内容。

资源推荐

资源详情

资源评论

收起资源包目录

50.zip （2个子文件）

101.htm 3KB

jquery-1.9.1.min.js 90KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="jquery-1.9.1.min.js" type="text/javascript"></script> <title>文字列表无缝向上滚动JavaScript代码</title> <style> * { margin: 0px; padding: 0px; border: 0px; } body { font-size: 12px; } #demo1 { height: auto; text-align: left; } #demo2 { height: auto; text-align: left; } #demo1 li { list-style-type: none; height: 22px; background: url() no-repeat left center; text-align: left; text-indent: 15px; } #demo2 li { list-style-type: none; height: 22px; background: url() no-repeat left center; text-align: left; text-indent: 15px; } </style> </head> <body> <div id="demo" style="overflow: hidden; height: 100px; width: 280px;"> <ul id="demo1"> <li><a href="/soft/4085.shtml" target="_blank">YP Menu 仿QQ菜单管理器左侧菜单</a></li> <li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li> <li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li> </ul> <div id="demo2"> </div> </div> <script language="javascript"> (function($) { $.fn.shangxiagun = function(option) { var defaultvalue = { speed: 40, mar: null, first: "", second: "" }; var opts = $.extend(defaultvalue, option || {}); var h = $(this).height(); var obj = $(this); var demo2 = obj.find("#" + opts.second); demo2.css("min-height", h); var demo1 = obj.find("#" + opts.first); demo1.css("min-height", h); demo2.html(demo1.html()); function quee() { if (demo2.get(0).offsetTop - obj.get(0).scrollTop <= 0) obj.get(0).scrollTop -= demo1.get(0).offsetHeight else { obj.get(0).scrollTop++ } } opts.mar = setInterval(quee, opts.speed) obj.mouseover(function() { clearInterval(opts.mar) }); obj.mouseout(function() { opts.mar = setInterval(quee, opts.speed) }); } })(jQuery) $("#demo").shangxiagun({ first: "demo1", second: "demo2" }); </script> </body> </html>

评论收藏

内容反馈